App Shell @astryx-svelte/core v0.5.2 · AppShell
Usage
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
Best practices
| Guidance | Practices |
|---|---|
| Do | Choose the right height: use "fill" for dashboards with internal scrolling and "auto" for pages that grow with content. |
| Do | Set contentPadding based on content type: 4 for forms and settings, 0 for tables and dashboards. |
| Do | Give every nav slot an accessible name. AppShell renders TopNav and SideNav as separate navigation landmarks, and a screen reader lists them by name, so pass label to each one. |
| Do | Start the page heading inside children. AppShell owns the skip link, the banner landmark and the main landmark, but it renders no heading, so the first heading in the content area is the page h1. |
| 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. |
| Don't | Add your own skip link or <main> element. AppShell already renders both, and a second main landmark makes the first ambiguous. |
Examples
Common configurations, variations, and states.AppShell — Content Only
Minimal shell with no navigation, useful for full-bleed pages, auth screens, or embedded views.
AppShell — Side Nav Only
App shell with SideNav header providing app identity, no TopNav needed.
AppShell — Top Nav Only
Simple layout with TopNav and no side navigation, suitable for landing pages.
AppShell — Top Nav with Side Nav
The most common layout with TopNav for app identity and SideNav for page-level navigation.
AppShell — With Banner
Full layout with TopNav, SideNav, and a dismissable info banner between the nav and content.