# Sidebar > The app shell: a collapsible left sidebar beside an inset content panel (`SidebarProvider` › `Sidebar` + `SidebarInset`). ## Facts - **Product**: Max - **Family**: Navigation - **Global**: `window.DigitalCrew.Sidebar` - **Source**: `max-agent: src/components/ui/sidebar.tsx` - **Import in the app**: `import { Sidebar } from "@/components/ui/sidebar";` - **Live preview**: /design/components/sidebar/preview.html - **Page**: /design/components/sidebar ## Guidelines **Measurements**: 16rem wide, 3rem when collapsed to icons, 18rem as the mobile Sheet below 768px. Max uses `variant="inset"` and `collapsible="offcanvas"`; the inset panel takes an 8px margin, `radius-xl` corners and `shadow-sm`. The toggle cycles large → small → hidden, is remembered for 7 days, and ⌘/Ctrl+B toggles it. Width changes run 300ms on `cubic-bezier(0.32, 0.72, 0, 1)`. **What you provide**: `SidebarHeader` (workspace logo or name), `SidebarContent` with `SidebarGroup`s (`SidebarGroupLabel` in sentence case — never "OVERVIEW") and `SidebarMenu` › `SidebarMenuItem` › `SidebarMenuButton` (`isActive`, `tooltip` for the collapsed state, a 16px icon then the label), `SidebarMenuBadge` for counts, and a `SidebarFooter` with the account. Put the page header (56px, 64px from `sm`) and `main` inside `SidebarInset`. **Active item**: `sidebar-accent` fill with `sidebar-primary` text. On phones the sidebar hides behind a 56px bottom tab bar (four destinations plus More); pages add `--app-bottom-inset` so nothing hides behind it. ## API ```ts type SidebarContextValue = { state: SidebarMode; mode: SidebarMode; setMode: React.Dispatch>; setPeek: React.Dispatch>; setFlyoutOpen: (id: string, open: boolean) => void; setSidebarFocus: React.Dispatch>; open: boolean; isMobile: boolean; openMobile: boolean; setOpenMobile: React.Dispatch>; toggleSidebar: () => void; }; declare function useSidebar(): SidebarContextValue; type SidebarProviderProps = React.HTMLAttributes & { defaultMode?: SidebarMode; children?: React.ReactNode; }; declare function SidebarProvider({ defaultMode, className, style, children, ...props }: SidebarProviderProps): any; type SidebarProps = React.HTMLAttributes & { side?: "left" | "right"; variant?: string; collapsible?: "offcanvas" | "icon" | "none"; }; declare function Sidebar({ side, variant, collapsible, className, children, ...props }: SidebarProps): any; declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps): any; declare function SidebarRail({ className, ...props }: React.HTMLAttributes): any; declare function SidebarInset({ className, ...props }: React.HTMLAttributes): any; declare function SidebarInput({ className, ...props }: React.ComponentProps): any; declare function SidebarHeader({ className, ...props }: React.HTMLAttributes): any; declare function SidebarFooter({ className, ...props }: React.HTMLAttributes): any; declare function SidebarSeparator({ className, ...props }: React.ComponentProps): any; declare function SidebarContent({ className, ...props }: React.HTMLAttributes): any; declare function SidebarGroup({ className, ...props }: React.HTMLAttributes): any; declare function SidebarGroupLabel({ className, asChild, ...props }: React.HTMLAttributes & { asChild?: boolean; }): any; declare function SidebarGroupAction({ className, asChild, ...props }: React.ButtonHTMLAttributes & { asChild?: boolean; }): any; declare function SidebarGroupContent({ className, ...props }: React.HTMLAttributes): any; declare function SidebarMenu({ className, ...props }: React.HTMLAttributes): any; declare function SidebarMenuItem({ className, ...props }: React.HTMLAttributes): any; type SidebarMenuButtonProps = React.ComponentProps<"button"> & { asChild?: boolean; isActive?: boolean; variant?: "default" | "outline"; size?: "default" | "sm" | "lg"; tooltip?: string | { children: React.ReactNode; }; className?: string; }; declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ref, ...props }: SidebarMenuButtonProps): any; type SidebarMenuFlyoutProps = React.ComponentProps; /** * Dropdown root for compact sidebar navigation. Portalled content sits outside * the sidebar's pointer boundary, so an open flyout must hold a Hidden hover * preview in place until the menu closes. */ declare function SidebarMenuFlyout({ open: controlledOpen, defaultOpen, onOpenChange, ...props }: SidebarMenuFlyoutProps): any; type SidebarMenuFlyoutTriggerProps = Omit, "asChild"> & { children: React.ReactElement; }; /** Binds Radix directly to the real menu button so pointer props, focus, and * the trigger ref all survive the `asChild` composition. */ declare function SidebarMenuFlyoutTrigger({ children, ...props }: SidebarMenuFlyoutTriggerProps): any; declare function SidebarMenuFlyoutContent({ className, side, align, sideOffset, collisionPadding, ...props }: React.ComponentProps): any; declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React.ButtonHTMLAttributes & { asChild?: boolean; showOnHover?: boolean; }): any; declare function SidebarMenuBadge({ className, ...props }: React.HTMLAttributes): any; declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.HTMLAttributes & { showIcon?: boolean; }): any; declare function SidebarMenuSub({ className, ...props }: React.HTMLAttributes): any; declare function SidebarMenuSubItem({ className, ...props }: React.HTMLAttributes): any; declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React.AnchorHTMLAttributes & { asChild?: boolean; size?: "sm" | "md"; isActive?: boolean; className?: string; }): any; export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuFlyout, SidebarMenuFlyoutContent, SidebarMenuFlyoutTrigger, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, }; ``` ## Example ```html
``` ## More in Navigation - [Breadcrumb](/design/components/breadcrumb.md): A page trail that shows where the current page sits in the hierarchy, built from composable parts inside a `