100 lines
2.5 KiB
Plaintext
100 lines
2.5 KiB
Plaintext
---
|
|
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.
|