App shell
Responsive application shell with navigation, search, and mobile tabs.
Loading interactive example
Use AppShell for a localized application frame with primary navigation, search, content, and mobile navigation. Numeric badges hide zero and cap visible totals at 99+, while retaining the full accessible count in both navigation surfaces.
API
| Member | Type | Kind | Required | Default |
|---|---|---|---|---|
account | Snippet | snippet | No | undefined |
brand | Snippet | snippet | No | undefined |
children | Snippet | snippet | No | undefined |
contentId | string | prop | No | undefined |
drawerOpen | boolean | binding | No | false |
fab | AppShellFab | prop | No | undefined |
header | Snippet | snippet | No | undefined |
height | number | string | prop | No | '100dvh' |
labels | AppShellLabels | prop | Yes | |
mainLandmark | boolean | prop | No | true |
nav | AppNavItem[] | prop | No | [] |
onSearchSelect | (item: CommandPaletteItem) => void | callback | No | undefined |
onSearchSubmit | (query: string) => void | callback | No | undefined |
search | boolean | prop | No | true |
searchEmpty | Snippet | snippet | No | undefined |
searchFilter | boolean | ((item: CommandPaletteItem, query: string) => boolean) | callback | No | undefined |
searchHotkey | string | false | prop | No | 'k' |
searchHotkeyHint | string | prop | No | undefined |
searchItems | CommandPaletteItem[] | CommandPaletteGroup[] | prop | No | [] |
searchLabel | string | prop | No | 'Search' |
searchOpen | boolean | binding | No | false |
searchPlaceholder | string | prop | No | 'Search…' |
searchQuery | string | binding | No | '' |
searchRow | Snippet<[CommandPaletteItem, boolean]> | snippet | No | undefined |
searchTrigger | 'topbar' | 'sidebar-top' | 'sidebar-bottom' | prop | No | 'topbar' |
tabs | AppNavItem[] | prop | No | undefined |
Examples
Source
Loading source