Docs Top Nav Architecture
Main Content
Right Outline Rail
Best when users need high-frequency section switching plus sticky context controls.
Layout
Page-level structural primitives. App shell wraps content in a centered max-width column. The two-column sidebar layout pins a narrow filter or navigation column beside a main content area, collapsing to stacked on mobile.
Source file: styles/components/layout.css
Select a layout pattern from the sidebar to view its documentation and live demo.
Layout Architectures
Start with these high-level maps before jumping into the inset component demos. Full-page mock examples are available for the page-level layouts.
App Shell Architecture
Brand
Primary Nav
Header Actions
Main Content Surface
Use for dashboard-style products that need one persistent frame around varied content.
Sidebar Workspace Architecture
Optimized for data-heavy workflows where filters and content need parallel visibility.
Top Nav
Sticky horizontal nav bar for docs-style navigation.
App Shell
Centered max-width wrapper with brand, nav, and action zones.
Sidebar Layout
Two-column layout with fixed aside and fluid main panel.
Entry Header
Label + metadata two-column row for timelines and lists.
Content Grid
Responsive auto-fill grid for equal-width tiles.