@neynar/ui/llm-docs/sidebar.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# Sidebar

**Type**: component

Flexible and responsive navigation sidebar component The Sidebar component is the main container for navigation content, supporting multiple visual variants, collapsible behaviors, and responsive design patterns. It automatically adapts between desktop layouts and mobile sheet overlays based on viewport size.

## JSX Usage

```jsx
import { Sidebar } from '@neynar/ui';

<Sidebar
  side={value}
  variant={value}
  collapsible={value}
  className="value"
>
  {/* Your content here */}
</Sidebar>
```

## Component Props

### side
- **Type**: `"left" | "right"`
- **Required**: No
- **Description**: No description available

### variant
- **Type**: `"sidebar" | "floating" | "inset"`
- **Required**: No
- **Description**: No description available

### collapsible
- **Type**: `"offcanvas" | "icon" | "none"`
- **Required**: No
- **Description**: No description available

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: Sidebar content (Header, Content, Footer)

## Examples

### Example 1
```tsx
// Standard navigation sidebar
<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <h2>My Application</h2>
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Main</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton asChild>
                <Link href="/dashboard">
                  <Home />
                  <span>Dashboard</span>
                </Link>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton>
            <Settings />
            <span>Settings</span>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarFooter>
  </Sidebar>
  <SidebarInset>
    <main>Main content area</main>
  </SidebarInset>
</SidebarProvider>
```
### Example 2
```tsx
// Icon-collapsible sidebar with tooltips
<SidebarProvider>
  <Sidebar collapsible="icon">
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Navigation</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Go to Dashboard">
                <Home />
                <span>Dashboard</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
</SidebarProvider>
```
### Example 3
```tsx
// Floating variant with custom styling
<SidebarProvider>
  <Sidebar variant="floating">
    <SidebarHeader>
      <SidebarTrigger />
      <h2>Floating Sidebar</h2>
    </SidebarHeader>
    <SidebarContent>
      // Navigation content
    </SidebarContent>
  </Sidebar>
</SidebarProvider>
```