OsirionPageLayout

OsirionPageLayout renders the shell of a page: a header, a main and a footer, stacked so the footer sits at the bottom of the viewport on short pages. Use it in your MainLayout.razor.

Package Osirion.Blazor.Core, namespace Osirion.Blazor.Components. Source on GitHub.

@using Osirion.Blazor.Components

@* A fixed-height frame stands in for the viewport, so the sticky footer shows with little content. The skip link and
   the scroll behavior are off here because the demo sits inside a page that has its own. *@
<div style="height: 16rem; border: 1px solid var(--osirion-border-color, #d1d5db); border-radius: 0.5rem; overflow: hidden;">
    <OsirionPageLayout MinHeightStrategy="content"
                       ShowSkipLink="false"
                       EnableHeaderScrollBehavior="false"
                       MainContentId="page-layout-demo-main">
        <Header>
            <div style="padding: 0.75rem 1rem; border-bottom: 1px solid var(--osirion-border-color, #d1d5db);">
                <strong>Example Ltd</strong>
            </div>
        </Header>
        <Body>
            <div style="padding: 1rem;">
                <p style="margin: 0;">The page content goes in the Body slot. It is short here, and the footer still sits at the bottom of the frame.</p>
            </div>
        </Body>
        <Footer>
            <div style="padding: 0.75rem 1rem; border-top: 1px solid var(--osirion-border-color, #d1d5db);">
                <small>Footer slot</small>
            </div>
        </Footer>
    </OsirionPageLayout>
</div>

The demo shows the three slots inside a 16 rem frame, with the skip link and the scroll behavior off because this page has its own. On a real page the layout fills at least the height of the viewport (MinHeightStrategy "viewport", the default), and the header is sticky.

Usage

@inherits LayoutComponentBase
@using Osirion.Blazor.Components

<OsirionPageLayout>
    <Header>
        <NavMenu />
    </Header>
    <Body>
        @Body
    </Body>
    <Footer>
        <OsirionFooter CompanyName="Example Ltd" />
    </Footer>
</OsirionPageLayout>

The layout's small collocated script loads through BlazorJSComponents, which AddOsirion registers. If you register Osirion.Blazor.Core without AddOsirion, add the loader in Program.cs:

builder.Services.AddJSComponents();

The Bootstrap example site in the repository uses the layout this way, with an announcement bar above the menu in the Header slot:

<OsirionPageLayout StickyFooter EnableHeaderScrollBehavior>
    <Header>
        <OsirionAnnouncementBar Id="release-4-0">
            New in 4.0: tabs, FAQ and feeds. <a href="/blog">Read more</a>
        </OsirionAnnouncementBar>
        <NavMenu />
    </Header>
    <Body>
        @Body
    </Body>
    <Footer>
        <OsirionFooter CompanyName="Example Ltd" />
    </Footer>
</OsirionPageLayout>

Parameters

Class and unmatched attributes go on the outer div, and so does the data-theme (data-bs-theme under Bootstrap) attribute that Theme writes. Style is not applied.

Behavior

• Rendering. The header, main and footer render on the server. The sticky footer is pure CSS: the layout is a flex column and main grows to fill it, so the footer sits at the bottom on short pages. That is also why StickyFooter="false" does not unstick the footer under the default MinHeightStrategy.
• Header on scroll. With EnableHeaderScrollBehavior the header is position: sticky; the script hides it while you scroll down past the first 100 pixels and shows it again when you scroll up or return to the top. The header stays in place while the pointer is over it or focus is inside it, so an open menu is not carried away. When the visitor prefers reduced motion the script leaves the header in place. Without script the header simply stays sticky. The script works under static SSR; it does not need an interactive render mode.
• Skip link (from 4.0). The link stays off screen until it receives keyboard focus, then appears at the top left. Its address is the current page plus # and MainContentId, because a bare #id would resolve against <base href="/"> and lead to the home page. The main element has tabindex="-1", and the script moves focus to it on click, which Blazor's enhanced navigation would otherwise skip.
• One footer landmark (from 4.0). Inside the Footer slot, OsirionFooter renders a div instead of its own footer, so the page keeps a single contentinfo landmark. In 3.x it rendered a nested footer.
• Printing. The layout drops its minimum height and its flex layout, so the page prints as plain blocks.

Styling

The scrolling header has z-index: 1000. The skip link uses the page's own text and background colors, inverted, and the theme's focus ring (--osirion-focus-ring-color, --osirion-focus-ring-width, --osirion-focus-ring-offset).

Related

• OsirionFooter
• OsirionAnnouncementBar
• OsirionStickySidebar
• Layout overview