Web app layout
The page frame of the web apps: skip links, a sidebar, a top bar and the main column. Pick it for any signed-in screen; useAppLayout gives a custom control the same state as the menu button.
- AppLayout
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Web app layout
Dark theme, Web app layout
High contrast theme, Web app layout
UsageLink to the section Usage
import { AppLayout } from '@skribly/ui/shell'<AppLayout
skipLinkLabel="Skip to content"
skipToNavLabel="Skip to navigation"
sidebar={<Sidebar label="Sidebar" closeLabel="Close navigation">…</Sidebar>}
topbar={<Topbar menuLabel="Open navigation">…</Topbar>}
>
<MainContent>…</MainContent>
</AppLayout>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The first Tab shows a skip link to the main landmark, and a second one to the navigation, which opens the sheet on a narrow layout.
- Below 48rem the sidebar becomes a modal sheet: focus moves in, stays in, and returns to the menu button on Escape.
- Set embedded for previews so the page keeps one set of landmarks.
This demo runs through axe in all three themes on every test run. See what the tests check.