OsirionStickySidebar

OsirionStickySidebar renders an aside that sticks below your header while the page scrolls and scrolls on its own when its content is taller than the viewport. Use it for a table of contents or documentation navigation next to long content. It is pure CSS, so it works under static SSR without script.

Usage

@using Osirion.Blazor.Components

<div class="docs-grid">
    <article>
        <h1>Installation</h1>
    </article>

    <OsirionStickySidebar>
        <nav aria-label="Documentation">
            <a href="/docs/installation">Installation</a>
            <a href="/docs/configuration">Configuration</a>
        </nav>
    </OsirionStickySidebar>
</div>

The CMS article page uses it the same way for its table of contents. Give the sidebar a column in a grid or flex layout; position: sticky only takes effect while the parent is taller than the sidebar and no ancestor between them sets overflow: hidden.

When your header is taller than 2.5rem, set the offset with the custom property the stylesheet reads:

.docs-grid {
    --osirion-header-height: 4rem;
}

Parameters

Style, Theme and unmatched attributes are not applied to the markup.

Behavior

• Sticky area. The aside is position: sticky with top and height derived from --osirion-header-height (default 2.5rem), so it fills the viewport below the header and scrolls internally (overflow-y: auto).
• Small screens. At 768 pixels wide or less the sidebar is static, with its natural height and no scroll area of its own, so it flows with the page. Hide or move it with your own CSS if a mobile layout needs that.
• Motion. Smooth scrolling inside the sidebar is turned off when the visitor prefers reduced motion.
• Accessibility. The element is an aside, a complementary landmark. Put a labelled nav inside it when it holds navigation, as in the example, so screen reader users can tell several landmarks apart. With HideScrollbar, make sure the content is reachable by keyboard (links are) because there is no visible scrollbar to drag.

Styling

Related

• OsirionPageLayout
• Layout overview