AppShell

A full page frame: header bar, sidebar, content. Sidebar folds above the content on small screens.

Example

Main content lives here.

<AppShell mainLabel="Demo content">
  <p slot="header">Acme console</p>
  <nav slot="sidebar" aria-label="Demo">...</nav>
  <p>Main content lives here.</p>
</AppShell>

Props

Prop	Type	Default	Description
`sidebarWidth`	`string`	`16rem`	Sidebar column width.
`sidebarLabel / mainLabel`	`string`	`Sidebar / Content`	Landmark names.

Theming

:root {
  --ink-shell-sidebar: 16rem;
}

Accessibility

Real header, aside, and main landmarks with names.
Sidebar stacks above content on mobile; DOM order never changes.