Skip to content
Layout

AppShell

Application chrome with top nav, side nav, and main content slots.

React source Astro source Core source

AppShell

Application chrome that lays out optional banner, top nav, side nav, main content, and aside in a CSS grid. Includes a skip-to-content link and a mobile breakpoint that hides the persistent side column. Wrap pages in AppShell instead of hand-rolling landmarks.

Examples

Default

Pass topNav and sideNav slots; children render in the main landmark.

Demo.tsxtsx
import { AppShell, SideNav, TopNav } from '@var-ui/react';

<AppShell
  topNav={<TopNav>…</TopNav>}
  sideNav={<SideNav>…</SideNav>}
>
  Main content
</AppShell>

Alt layout

Set layout="alt" so the side column spans the full viewport height and the header sits above main only — useful when the side nav is the primary chrome.

Skip to content

Alt layout — side column spans full height
Demo.tsxtsx
import { AppShell, SideNav, TopNav } from '@var-ui/react';

<AppShell
  layout="alt"
  contentPadding={3}
  topNav={<TopNav heading={<TopNav.Heading heading="Acme" />}>…</TopNav>}
  sideNav={<SideNav header={<SideNav.Heading heading="Workspace" />}>…</SideNav>}
>
  Main content
</AppShell>

Props

Accessibility

AppShell renders a skip-to-content link targeting the main landmark (id var-ui-app-shell-main). Keep meaningful content in children so the skip target is useful. The shell wraps slots in MobileNavProvider so a MobileNav / MobileNav.Toggle pair can share open state at the mobile breakpoint without extra wiring.