AppShell

Application-level layout shell with top navigation, side navigation, banner, skip-to-content support, and responsive mobile navigation.

Examples

Basic

Skip to content

Silver UI

DocsComponents

Create

SilverWorkspace

Main

Home

Settings

Dashboard

Application content renders in the main region.

<AppShell {...args} sideNav={sideNav} topNav={topNav}>
  <div>
    <h2>Dashboard</h2>
    <p>Application content renders in the main region.</p>
  </div>
</AppShell>

With Banner

Skip to content

Scheduled maintenance begins at 6 PM.

Silver UI

DocsComponents

Create

SilverWorkspace

Main

Home

Settings

Settings

Banner content appears above the top navigation.

<AppShell
  {...args}
  banner={
    <div style={{background: '#edf7ff', padding: 12}}>
      Scheduled maintenance begins at 6 PM.
    </div>
  }
  sideNav={sideNav}
  topNav={topNav}>
  <div>
    <h2>Settings</h2>
    <p>Banner content appears above the top navigation.</p>
  </div>
</AppShell>

Auto Height

Skip to content

Silver UI

DocsComponents

Create

SilverWorkspace

Main

Home

Settings

Dashboard

Content paragraph 1. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 2. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 3. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 4. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 5. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 6. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 7. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 8. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 9. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 10. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 11. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 12. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 13. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 14. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 15. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 16. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 17. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 18. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 19. This content is long enough to trigger scrolling behavior within the shell.

Content paragraph 20. This content is long enough to trigger scrolling behavior within the shell.

<AppShell {...args} sideNav={sideNav} topNav={topNav}>
  {longContent}
</AppShell>

Side Nav Only

Skip to content

SilverWorkspace

Main

Home

Settings

Dashboard

This shell has a side nav but no top nav. On mobile, an auto-generated top bar with a toggle button appears.

<AppShell {...args} sideNav={sideNav}>
  <div>
    <h2>Dashboard</h2>
    <p>
      This shell has a side nav but no top nav. On mobile, an auto-generated
      top bar with a toggle button appears.
    </p>
  </div>
</AppShell>

Content Only

Skip to content

Minimal Shell

No side nav, top nav, or banner — just content in a layout shell.

<AppShell {...args}>
  <div>
    <h2>Minimal Shell</h2>
    <p>No side nav, top nav, or banner — just content in a layout shell.</p>
  </div>
</AppShell>

Variant Section

Skip to content

Silver UI

DocsComponents

Create

SilverWorkspace

Main

Home

Settings

Section Variant

Dividers separate the navigation and content areas.

<AppShell {...args} sideNav={sideNav} topNav={topNav}>
  <div>
    <h2>Section Variant</h2>
    <p>Dividers separate the navigation and content areas.</p>
  </div>
</AppShell>

Mobile Nav Disabled

Skip to content

Silver UI

DocsComponents

Create

SilverWorkspace

Main

Home

Settings

Mobile Nav Disabled

Resize the viewport below the breakpoint — no mobile toggle or drawer will appear.

<AppShell {...args} isMobileNavDisabled sideNav={sideNav} topNav={topNav}>
  <div>
    <h2>Mobile Nav Disabled</h2>
    <p>
      Resize the viewport below the breakpoint — no mobile toggle or drawer
      will appear.
    </p>
  </div>
</AppShell>

API

AppShell

Application-level layout shell with top navigation, side navigation, banner, skip-to-content support, and responsive mobile navigation.

Prop	Type	Default	Description
banner	ReactNode	—	System-wide content rendered above the top navigation.
children*	ReactNode	—	Main content rendered inside the shell's <main> landmark.
className	string	—	Additional CSS class names applied to the root element.
contentPadding	0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10	—	Padding applied to the main content area. Default is 0.
data-testid	string	—	Test ID applied to the root element.
height	"fill" | "auto"	—	Height behavior. fill keeps scrolling inside the shell; auto lets the page grow with content.
isMobileNavDisabled	boolean	—	Disable generated mobile navigation.
mobileBreakpoint	"sm" | "md" | "lg" | "none"	'md'	Breakpoint below which mobile navigation is used.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the root element.
sideNav	ReactNode	—	Side navigation slot, typically a SideNav.
style	CSSProperties	—	Inline styles applied to the root element.
topNav	ReactNode	—	Top navigation slot, typically a TopNav.
variant	"section" | "default"	—	Background and divider style for the shell.