App Layout
The app shell: sticky navbar and sidebar over a scrolling page, aside, banner and footer, skip link, and a drawer below 64rem.
Modes
The shell around every screen. It renders the landmarks (banner, navigation, main, aside, contentinfo) and a skip link first, measures the header so nothing focused ever hides under it (WCAG 2.4.11), and moves focus to the new heading on route changes with useRouteFocus. Each example below is its own browser window; to fit this page they switch to the drawer below 40rem instead of the default 64rem (drawerBelow).
| Mode | Purpose | Benefit | Best for |
|---|---|---|---|
| Document scroll | The page scrolls; navbar and sidebar stick. | Scroll restoration, printing, anchors and sticky elements inside the page all work as the browser intends. The default. | Almost every app |
| Pane scroll | The shell fills the screen and only the content scrolls. | Chrome never moves; the content keeps its own scroll position. | Editors, inboxes, canvases, virtual grids |
| With aside | A named right-hand panel for details, help or activity. | Context next to the work, open or closed on its own; a drawer on small screens. | Detail views, ticket systems |
| With banner | A bar above everything: viewing as, offline, trial. | Its height is measured, so the sticky header and anchors move with it. | Impersonation, system notices |
| Contained width | The content steps 1280 → 1620 → 2160 px with the screen. | Dashboards stay readable on a 34-inch monitor. | Settings, forms, reading |
| Edge to edge | No padding around the content. | Tables and canvases run to the edges. | Data tables, maps, boards |
| Mobile overlay | Below 64rem (drawerBelow) the sidebar becomes a drawer. | One column, no sideways scrolling (WCAG 1.4.10); the drawer keeps focus until closed. | Tablets and phones |
Usage
Installation
npm install @wunderui/reactThen import what you need:
import {
AppLayout,
AppLayoutAsideTrigger,
AppLayoutNavigationTrigger,
AppLayoutProps,
} from "@wunderui/react"Examples
Document scroll
The default. The page scrolls; the navbar sticks and the sidebar sticks below it with its own scroll. Press Tab once: the skip link comes first and jumps into the content.
Pane scroll
scroll="pane": the shell fills the viewport and only the content scrolls — for editors, inboxes and canvases. The scroll padding moves onto the content pane.
With aside
A named aside on the right with its own scroll (shown here without the sidebar so the content keeps its room). The panel button in the navbar closes and opens it (width, duration-base, ease-move); below 64rem it opens as a drawer.
With banner
A banner above the navbar. Its height is measured, so the sticky navbar sits below it and anchors land clear of both. End the session with × and everything moves up.
Contained width
width="contained": the content stays at 1280 px here and steps up to 1620 and 2160 px on very wide screens.
Edge to edge
padding="none" for content that should touch the edges, like this table.
Mobile overlay
Below the drawer breakpoint (64rem by default) the sidebar leaves the layout and the menu button opens it as a modal drawer: focus moves in, Escape or the scrim closes it, focus returns to the button.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Project workspace
The navbar on top and the sidebar on the left frame the page; pick Inbox, Projects or Reports to change the content.