---
category: layout
---

# Sidebar

Source: `components/ui/sidebar.tsx`.

`Sidebar` is a compound component. Its parts are exported **flat** (`SidebarContent`, not
`Sidebar.Content`) and each is a separate top-level export of the bundle:

| Part | Props |
| --- | --- |
| `SidebarContent` | `React.ComponentProps<'div'>` |
| `SidebarFooter` | `React.ComponentProps<'div'>` |
| `SidebarGroup` | `React.ComponentProps<'div'>` |
| `SidebarGroupAction` | `React.ComponentProps<'button'> & {…}` |
| `SidebarGroupContent` | `React.ComponentProps<'div'>` |
| `SidebarGroupLabel` | `React.ComponentProps<'div'> & {…}` |
| `SidebarHeader` | `React.ComponentProps<'div'>` |
| `SidebarInput` | `React.ComponentProps<typeof Input>` |
| `SidebarInset` | `React.ComponentProps<'main'>` |
| `SidebarMenu` | `React.ComponentProps<'ul'>` |
| `SidebarMenuAction` | `React.ComponentProps<'button'> & {…}` |
| `SidebarMenuBadge` | `React.ComponentProps<'div'>` |
| `SidebarMenuButton` | `React.ComponentProps<'button'> & {…} & VariantProps<typeof sidebarMenuButtonVariants>` |
| `SidebarMenuItem` | `React.ComponentProps<'li'>` |
| `SidebarMenuSkeleton` | `React.ComponentProps<'div'> & {…}` |
| `SidebarMenuSub` | `React.ComponentProps<'ul'>` |
| `SidebarMenuSubButton` | `React.ComponentProps<'a'> & {…}` |
| `SidebarMenuSubItem` | `React.ComponentProps<'li'>` |
| `SidebarProvider` | `React.ComponentProps<'div'> & {…}` |
| `SidebarRail` | `React.ComponentProps<'button'>` |
| `SidebarSeparator` | `React.ComponentProps<typeof Separator>` |
| `SidebarTrigger` | `React.ComponentProps<typeof Button>` |

All parts accept `className` and are composed as children of `Sidebar`.