# AppShell

Responsive application shell with navigation, search, and mobile tabs.

Use AppShell for a localized application frame with primary navigation, search, content, and mobile navigation.

## API

The package declarations define these public members.

| Member | Type | Kind | Required | Default | Description |
| --- | --- | --- | --- | --- | --- |
| `account` | `Snippet` | snippet | No | `undefined` | Block at the bottom of the sidebar (account). |
| `brand` | `Snippet` | snippet | No | `undefined` | Block at the top of the sidebar (workspace or logo). |
| `children` | `Snippet` | snippet | No | `undefined` | Main content, which scrolls inside the floating surface. |
| `contentId` | `string` | prop | No | `undefined` | ID of the primary content target. Defaults to an SSR-stable generated ID. |
| `drawerOpen` | `boolean` | binding | No | `false` | Mobile drawer open state. Two-way bindable. |
| `fab` | `AppShellFab` | prop | No | `undefined` | Global floating action button (for example, Capture). |
| `header` | `Snippet` | snippet | No | `undefined` | Sticky bar over the content (breadcrumbs or page actions). |
| `height` | `number \| string` | prop | No | `'100dvh'` | Host height. Defaults to the full viewport; pass a number or CSS length to embed. |
| `labels` | `AppShellLabels` | prop | Yes | - | Locale-owned navigation and bypass-link labels. |
| `mainLandmark` | `boolean` | prop | No | `true` | Whether AppShell owns the page's main landmark and bypass link. |
| `nav` | `AppNavItem[]` | prop | No | `[]` | Primary navigation — sidebar on desktop, modal drawer on mobile. |
| `onSearchSelect` | `(item: CommandPaletteItem) => void` | callback | No | `undefined` | Fired when a palette row is chosen. |
| `onSearchSubmit` | `(query: string) => void` | callback | No | `undefined` | Fired when Enter is pressed with no row highlighted. |
| `search` | `boolean` | prop | No | `true` | Show the search trigger and command palette. |
| `searchEmpty` | `Snippet` | snippet | No | `undefined` | Empty-state content for the palette. |
| `searchFilter` | `boolean \| ((item: CommandPaletteItem, query: string) => boolean)` | callback | No | `undefined` | Client-side filtering of `searchItems` by the query. |
| `searchHotkey` | `string \| false` | prop | No | `'k'` | Letter for the global mod+letter shortcut. Falsy disables it. |
| `searchHotkeyHint` | `string` | prop | No | `undefined` | Visible shortcut hint. Auto-derived from `searchHotkey` when omitted. |
| `searchItems` | `CommandPaletteItem[] \| CommandPaletteGroup[]` | prop | No | `[]` | Result model rendered and navigated by the palette. |
| `searchLabel` | `string` | prop | No | `'Search'` | Accessible label for the search trigger and palette. |
| `searchOpen` | `boolean` | binding | No | `false` | Command-palette open state. Two-way bindable. |
| `searchPlaceholder` | `string` | prop | No | `'Search…'` | Placeholder for the search trigger and palette field. |
| `searchQuery` | `string` | binding | No | `''` | Search query. Two-way bindable. |
| `searchRow` | `Snippet<[CommandPaletteItem, boolean]>` | snippet | No | `undefined` | Optional per-row renderer for the palette. |
| `searchTrigger` | `'topbar' \| 'sidebar-top' \| 'sidebar-bottom'` | prop | No | `'topbar'` | Where the trigger sits: top bar (default) or the sidebar. |
| `tabs` | `AppNavItem[]` | prop | No | `undefined` | Mobile bottom navigation (a compact subset, usually 3–5 items). |

## Related

- [Provider](/docs/components/provider): Installs theme variables, utility CSS, scope boundaries, and overlay portal context.
- [Accordion](/docs/components/accordion): Single or multiple disclosure panels.
- [Collapsible](/docs/components/collapsible): Single disclosure region with panel and plain presentations and measured-height animation.