# Sidebar
This version is for Radix projects. For Base UI, read [/sidebar.md?base=base](/sidebar.md?base=base).
Lays out an app's side navigation, with groups, a header and a footer. Collapses, and becomes a sheet on small screens.
```bash
npx shadcn@latest add @wisty/sidebar
```
## Examples
- `default` (Reports navigation): The Reports app's nav in two sections, with icons, badges, the active page and a disabled item, beside a page with the trigger.
- `links` (Links): Items that link to pages, through `asChild` on Radix or `render` on Base UI, the current page set with `isActive` and `aria-current="page"`.
- `in-page` (In a page): Navigation between the sections of one page, beside their content, with `collapsible="none"` on `Sidebar` and `min-h-0` on the provider.
- `shaded` (Shaded): The nav on the gray page beside a white content panel, set with `variant="inset"` on `Sidebar`.
- `compact` (Compact): Small rows for a long list in little vertical space, set with `size="sm"` on each `SidebarMenuButton`.
- `quick-find` (Quick Find): A `SidebarInput` in `SidebarHeader` that filters the items, as Setup's Quick Find.
- `overflow` (Show more): A section that shows its first items and a Show more row that reveals the rest, as SLDS's overflow.
- `nested` (Nested items and actions): A `SidebarMenuSub` under an item, a `SidebarMenuAction` on rows, a `SidebarGroupAction` on a title, and a `SidebarSeparator`.
- `icon` (Icon rail): Collapsed with `collapsible="icon"` on `Sidebar`, each button naming itself with `tooltip`, under an app header and over a footer menu.
## When to use
- For the navigation of an app: its objects, pages or Setup sections, in groups with titles.
- For a list of destinations that stays on screen while the content changes, like Reports' folders or Object Manager's objects.
- For an app shell that collapses its navigation to make room and moves it into a sheet on small screens.
- For navigation inside one page, between the sections of a settings page or a folder list beside its content, with `collapsible="none"`, as the In a page example does.
## When not to use
- To switch between views of one record or page. Use Tabs.
- For a short list of links at the top of a page. Use Breadcrumb.
- For a menu of commands that opens from a button. Use Dropdown Menu.
- For a deep tree of nodes that expand in place, like Setup's object tree. Use Tree.
## Usage
```text
SidebarProvider
├── Sidebar
│ ├── SidebarHeader
│ ├── SidebarContent
│ │ └── SidebarGroup
│ │ ├── SidebarGroupLabel
│ │ └── SidebarGroupContent
│ │ └── SidebarMenu
│ │ └── SidebarMenuItem
│ │ ├── SidebarMenuButton
│ │ ├── SidebarMenuBadge
│ │ └── SidebarMenuSub
│ │ └── SidebarMenuSubItem
│ │ └── SidebarMenuSubButton
│ └── SidebarFooter
└── SidebarInset
└── SidebarTrigger
```
Each `SidebarMenuButton` holds an icon and then its label in a `span`, last, so the label truncates.
```tsx
import { HomeIcon } from "lucide-react"
import { SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"
```
```tsx
Home
```
The examples hold the selected row in state, so a click selects it; an app derives the active item from its route and sets `isActive` and `aria-current="page"` on the current page's row.
`collapsible` on `Sidebar` sets how it closes: `offcanvas` slides it off screen, `icon` shrinks it to an icon rail, and `none` keeps it open at every width, with no sheet on small screens. A button's `tooltip` shows only on the icon rail. `showOnHover` on `SidebarMenuAction` hides the action until its row is hovered or focused, on screens 768px and wider.
Items are buttons. For an item that goes to a page, pass `asChild` with an `` in Radix projects, or `render={}` in Base UI projects, as the Links example does; `SidebarMenuSubButton` is a link already. In Radix projects, items with a `tooltip` need a `TooltipProvider` around the app.
The provider writes its state to a `sidebar_state` cookie but never reads it. Read the cookie on the server and pass it as `defaultOpen`, or the sidebar opens on every load.
The app shell's provider goes around the whole app, once. A page's own navigation gets its own `SidebarProvider` around just that region, with `className="min-h-0"` so it doesn't fill the screen, and a `Sidebar` with `collapsible="none"`, which never collapses or moves into a sheet. It has no border of its own: add `border-e border-sidebar-border` on the side that meets the content, or `variant="inset"` for the shaded nav on a gray region. Every provider on the page listens for Ctrl+B and writes the same cookie. A `collapsible="none"` sidebar ignores its open state, so leave `SidebarTrigger` out of the region.
## Rules
- Use `variant="inset"` for the shaded nav and `size="sm"` on the buttons for the compact nav. Don't restyle rows, bars or tints with utility classes.
- Make an item a link when it goes to a page, and a button when it changes something on the page, as Show more does.
- Use `size="lg"` for a row in the header or footer, so its avatar lines up with the section titles.
- Use lucide icons as bare children. Don't import Salesforce icons into a primitive.
## API reference
| Part | Built on |
| --- | --- |
| `SidebarProvider` | [`