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 layout container
    • <LayoutHeader> The top container for a Bar or navigation
    • <LayoutContent> The main content container
    • <LayoutFooter> The bottom layout
    • <LayoutSider> The sidebar container
      • <LayoutSiderContent> Main content for sider component

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 Type Default
Sider Indicates that layout will contain sider. bool false
Loading If true, an overlay will be created so the user cannot click anything until set to false. bool false

LayoutHeader

Name Description Type Default
Fixed If true header will be fixed to the top of the page. bool false

LayoutFooter

Name Description Type Default
Fixed If true footer will be fixed to the bottom of the page. bool false
On this page