Blazorise Layout system

Handling the overall layout of a page.

The <Layout> is a component for building common application layouts.

The layout consists of four diferent sections: a horizontal navigation bar (LayoutHeader), a collapsible navigation sidebar (LayoutSider) and a content area (LayoutContent). An applicationss main navigation blocks should be positioned in the navbar and/or sidebar, whereas views are rendered in the content area.

Layout is responsive and adjusts automatically to fit desktop, tablet, and mobile screen sizes.

  • <Layout> The main container.

    • <LayoutHeader> The top container for a Bar or navigation.

    • <LayoutContent> The main content area.

    • <LayoutFooter> The bottom container for a Bar or navigation.

    • <LayoutSider> The sidebar container.

      • <LayoutSiderContent> The main content area of the sidebar.

Examples

Basic

Header
Content
Footer 
<Layout>
    <LayoutHeader>
        Header
    </LayoutHeader>
    <LayoutContent>
        Content
    </LayoutContent>
    <LayoutFooter>
        Footer
    </LayoutFooter>
</Layout>

Sider with Header on top

The LayoutHeader can be located on top or to the side of the drawer.

When put on top, the LayoutHeader is typically used as an application header. Application headers contain, for example, the application's name and branding, as well as actions that apply to the entire application, such as notifications, settings, etc.

Header
Content 
<Layout>
    <LayoutHeader Fixed>
        Header
    </LayoutHeader>
    <Layout Sider>
        <LayoutSider>
            <LayoutSiderContent>
                Sider
            </LayoutSiderContent>
        </LayoutSider>
        <Layout>
            <LayoutContent>
                Content
            </LayoutContent>
        </Layout>
    </Layout>
</Layout>

With Sider

When placed to the side, the LayoutHeader is often seen as a view header, housing the view's title, and actions and secondary navigation that relate only to the current view.
Header
Content 
<Layout Sider>
    <LayoutSider>
        <LayoutSiderContent>
            Sider
        </LayoutSiderContent>
    </LayoutSider>
    <Layout>
        <LayoutHeader Fixed>
            Header
        </LayoutHeader>
        <LayoutContent>
            Content
        </LayoutContent>
    </Layout>
</Layout>

API

Attributes

Layout

Name Description TypeDefault
Sider Indicates that layout will contain sider. boolfalse
Loading If true, an overlay will be created so the user cannot click anything until set to false. boolfalse

LayoutHeader

Name Description TypeDefault
Fixed If true header will be fixed to the top of the page. boolfalse

LayoutFooter

Name Description TypeDefault
Fixed If true footer will be fixed to the bottom of the page. boolfalse
On this page