Layout & nav

The app shell, sidebar, top nav, page header, and breadcrumbs.

AppShell, Sidebar & TopNav

The full application chrome: a sidebar with groups, sub-menus, badges, actions, a skeleton and a footer user menu, next to a sticky top nav — the same shell this gallery is built on. Rest a mouse on the collapsed "Projects" group to see expandOnHover disclose it without a click; move away and it reverts, having remembered nothing. "Inbox" holds the current route, so it stays open — hover can only ever open a group, never shut the branch you are in.

  • AppShell
  • SidebarProvider
  • SidebarInset
  • Sidebar
  • SidebarHeader
  • SidebarInput
  • SidebarContent
  • SidebarGroup
  • SidebarGroupLabel
  • SidebarGroupAction
  • SidebarGroupContent
  • SidebarMenu
  • SidebarMenuItem
  • SidebarMenuButton
  • SidebarMenuAction
  • SidebarMenuBadge
  • SidebarMenuSub
  • SidebarMenuSubItem
  • SidebarCollapsible
  • SidebarCollapsibleTrigger
  • SidebarCollapsibleContent
  • SidebarMenuSubButton
  • SidebarMenuSkeleton
  • SidebarSeparator
  • SidebarFooter
  • SidebarRail
  • SidebarTrigger
  • TopNav
  • TopNavBrand
  • TopNavNav
  • TopNavLink
  • TopNavActions
  • UserMenu
Acme
Platform
  • 3
Loading…
Dashboard

Overview

Everything at a glance.

The gallery chrome around you is this same AppShell + Sidebar + TopNav — this preview shows one bounded instance with every sidebar part wired up.

PageHeader & PageToolbar

The title/description/actions block above a screen, plus a filters toolbar.

  • PageHeader
  • PageHeaderContent
  • PageHeaderTitle
  • PageHeaderDescription
  • PageHeaderActions
  • PageToolbar
  • PageToolbarSpacer

Team members

Manage who has access to this workspace.