AppShell

app chrome

Application frame with a sticky topbar, grouped sidebar navigation, skip link, responsive drawer, and a dedicated <main>region for product screens.

Preview

Usage

import { AppShell, Button, ThemeToggle } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

const nav = [
  {
    label: 'Workspace',
    items: [
      { href: '/overview', label: 'Overview' },
      { href: '/reviews', label: 'Reviews' },
    ],
  },
  {
    label: 'Operations',
    items: [
      { href: '/queues', label: 'Queues' },
      { href: '/reports', label: 'Reports' },
    ],
  },
];

<AppShell
  nav={nav}
  current="/reviews"
  navLabel="Product navigation"
  brand={<a class="appshell-brand" href="/overview">Frauthy Admin</a>}
  actions={<><Button variant="secondary" size="sm">New review</Button><ThemeToggle /></>}
>
  <h1>Reviews</h1>
  <p>Operational queue content renders inside the shell main region.</p>
</AppShell>

Props

Prop	Type	Default	Description
`brand`	`JSX.Element`	--	Wordmark or product link rendered at the topbar start
`nav`	`AppShellNavSection[]`	--	Grouped sidebar navigation; each item has `href` and `label`
`current`	`string`	--	Current route used to set `aria-current="page"` on the active nav item
`actions`	`JSX.Element`	--	Right-aligned topbar controls such as buttons or `ThemeToggle`
`navLabel`	`string`	`'Main'`	Accessible label for the sidebar nav landmark
`children`	`JSX.Element`	--	Screen content rendered inside the shell's `<main>`

Accessibility

Landmarks: Renders one <header>, one labelled <nav>, and one <main> in its own document context.
Skip link: Provides Skip to content targeting the main region.
Current page: Matching nav items receive aria-current="page".
Mobile drawer: Toggle exposes aria-expanded and aria-controls; Escape closes the drawer and returns focus.
Focus: Nav links and drawer toggle use visible :focus-visible rings.

Do / Don't

Do

Render AppShell at the application document level, with the page screen as its children and one meaningful label for the product navigation.

Don't

Don't embed AppShell inside another page layout that already has its own header, nav, or main landmarks. Use an iframe for documentation previews.