Design System
Layout

App layout

The application shell: sidebar, topbar, content region and footer composed into one frame.

Not documented yet

This component ships in the design system and is fully supported. What is missing is the guidance around it: when to reach for it, the do and don't, and the accessibility notes. Until that is written, Storybook is the reference for variants, props and live controls.

Props

PropTypeDefaultDescription
sectionsrequiredNavSection[]Grouped navigation model passed through to the sidebar.
childrenrequiredReact.ReactNodePage content rendered in the scrollable main region.
classNamestring | undefinedOptional classes applied to the `<main>` content region.
renderLink((props: NavLinkProps) => React.ReactNode) | undefinedRenders each sidebar link — forwarded to `AppSidebar`. Supply your router's link component to keep navigation client-side.

On this page