---
title: Sidebar
description: A composable, themeable and customizable sidebar component. Created by Shadcn and animated by Animate UI.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="radix-sidebar-demo" iframe bigScreen />

## Installation

<ComponentInstallation name="radix-sidebar" />

## Usage

```tsx
<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <SidebarMenu>
        <SidebarMenuItem>Item 1</SidebarMenuItem>
        <SidebarMenuItem>Item 2</SidebarMenuItem>
        <SidebarMenuItem>Item 3</SidebarMenuItem>
      </SidebarMenu>
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Label 1</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>Item 1</SidebarMenuItem>
          <SidebarMenuItem>Item 2</SidebarMenuItem>
          <SidebarMenuItem>Item 3</SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
      <SidebarGroup>
        <SidebarGroupLabel>Label 2</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>Item 1</SidebarMenuItem>
          <SidebarMenuItem>Item 2</SidebarMenuItem>
          <SidebarMenuItem>Item 3</SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>
      <SidebarMenu>
        <SidebarMenuItem>Item 1</SidebarMenuItem>
        <SidebarMenuItem>Item 2</SidebarMenuItem>
        <SidebarMenuItem>Item 3</SidebarMenuItem>
      </SidebarMenu>
    </SidebarFooter>
    <SidebarRail />
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
    {...}
  </SidebarInset>
</SidebarProvider>
```

## Props

<div className="flex flex-row gap-x-3">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar"
    text="Docs"
  />
</div>

### Animate UI props

#### Sidebar

<TypeTable
  type={{
    containerClassName: {
      description: 'The class name of the sidebar container',
      type: 'string',
      required: false,
    },
    animateOnHover: {
      description: 'Whether to animate the sidebar on hover',
      type: 'boolean',
      required: false,
      default: 'true',
    },
    transition: {
      description: 'The transition of the sidebar',
      type: 'Transition',
      required: false,
      default: '{ type: "spring", stiffness: 350, damping: 35 }',
    },
  }}
/>

## Credits

- We use [Radix UI](https://www.radix-ui.com/primitives/docs) for the sidebar component.
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/sidebar) for the sidebar component.