The outermost layout for an application. Provides slots for top navigation, side navigation, banners, and main content. Use it as the root wrapper for every page. It handles responsive mobile navigation and skip-to-content automatically. Configure side nav collapse on SideNav with its collapsible prop.
ts
| Guidance | Practices |
|---|---|
| Do | Choose the right height: use "fill" for dashboards with internal scrolling and "auto" for pages that grow with content. |
| Do | Set |
| Don't | Nest one AppShell inside another; it's the outermost layout frame. |
| Don't | Use for sub-page layouts; use Layout for content areas within AppShell. |
Minimal shell with no navigation, useful for full-bleed pages, auth screens, or embedded views.
App shell with SideNav header providing app identity, no TopNav needed.
Simple layout with TopNav and no side navigation, suitable for landing pages.
The most common layout with TopNav for app identity and SideNav for page-level navigation.
Full layout with TopNav, SideNav, and a dismissable info banner between the nav and content.