# Sidebar: Controlled

> Pass `open` and `onOpenChange`. The trigger, the rail and the shortcut all go through `onOpenChange`.

Example: https://hextaui.com/docs/sidebar/examples/controlled
Component docs: https://hextaui.com/docs/sidebar.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/sidebar-controlled.json
```

This adds `components/examples/sidebar/controlled.tsx` with the Sidebar component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/sidebar/controlled.tsx"
"use client"

import * as React from "react"
import { IconHome, IconInbox, IconSettings } from "@tabler/icons-react"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
} from "@/components/ui/sidebar"
import { Switch } from "@/components/ui/switch"

const items = [
  { title: "Home", icon: IconHome },
  { title: "Inbox", icon: IconInbox },
  { title: "Settings", icon: IconSettings },
]

export function SidebarControlled() {
  const [open, setOpen] = React.useState(true)

  return (
    <SidebarProvider
      open={open}
      onOpenChange={setOpen}
      className="h-96 min-h-0"
    >
      <Sidebar collapsible="icon">
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupContent>
              <SidebarMenu>
                {items.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton tooltip={item.title}>
                      <item.icon />
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <div className="flex items-center gap-3 p-4">
          <Switch
            id="sidebar-controlled-open"
            checked={open}
            onCheckedChange={setOpen}
          />
          <label htmlFor="sidebar-controlled-open" className="text-sm">
            Sidebar {open ? "expanded" : "collapsed"}
          </label>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}
```

## Props in this example

### SidebarProvider

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | – |  |
| `onOpenChange` | `(open: boolean) => void` | – |  |

### Sidebar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `collapsible` | `"offcanvas" \| "icon" \| "none"` | `"offcanvas"` |  |

### SidebarMenuButton

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tooltip` | `ReactNode \| TooltipContentProps` | – | Shown while collapsed to icons. Content slides between items as you move along the menu. |

## More Sidebar examples

- [Variants](https://hextaui.com/docs/sidebar/examples/variants.md)
- [Collapsible](https://hextaui.com/docs/sidebar/examples/collapsible.md)
- [Collapsible groups and submenus](https://hextaui.com/docs/sidebar/examples/submenus.md)
- [Right side](https://hextaui.com/docs/sidebar/examples/right.md)
- [Under a header](https://hextaui.com/docs/sidebar/examples/header.md)
- [Loading](https://hextaui.com/docs/sidebar/examples/skeleton.md)
- [Right to left](https://hextaui.com/docs/sidebar/examples/rtl.md)