Skip to main content

App Shell

Interactive demonstration of the app shell components and state management.

Sidebar State

Expanded:
No
Pinned:
No
Mobile Open:
No

Responsive Breakpoints

Resize the browser window to see the sidebar behavior change:

  • Mobile (<768px): Drawer + FAB (bottom-right)
  • Tablet (768-1023px): Rail with click-to-expand
  • Desktop (1024px+): Rail with hover-to-expand

Navigation Components

The sidebar includes enhanced navigation with dropdowns and user menu:

  • NavItem - Compound button with main navigation + optional dropdown
  • NavAccordion - Keyboard-navigable inline accordion submenu for child pages (mobile)
  • UserMenu - Avatar dropdown with profile, settings, theme, and sign out

Features

  • Active state detection: Highlights current page and parent nav items
  • Compound button: Main area navigates, chevron toggles dropdown
  • Keyboard navigation: Arrow keys, Enter to select, Escape to close
  • Click outside to close: Dropdown auto-closes
  • Smooth animations: Respects prefers-reduced-motion

Try expanding the sidebar (hover on desktop, click on tablet) to see the navigation dropdowns and user menu. The chevron rotates 90° when open.

Think this pattern could be better? Tell us how.

Leave feedback