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.

Usage

@inherits LayoutComponentBase
@using Osirion.Blazor.Components

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

The layout loads a small collocated script through BlazorJSComponents, so register its services 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.

Behavior

• Static SSR. The header, main and footer render on the server. The sticky footer is pure CSS (a flex column).
• 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. When the visitor prefers reduced motion the script leaves the header in place. Without script the header simply stays sticky.
• Skip link (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 after the jump, which Blazor's enhanced navigation would otherwise skip.
• One footer landmark (4.0). Inside the Footer slot, OsirionFooter renders a div instead of its own footer, so the page keeps a single contentinfo landmark. In 4.0 it rendered a nested footer.

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