# Sidebar nav group

> Collapsible navigation sections with sub-items and a rotating chevron.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/collapsible-05).

- Page, with a live preview: https://shadcn.exchange/r/flx/collapsible-05
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/collapsible-05-light-859c434e67b3c97a.png
- Registry item: https://ui.flexnative.com/r/collapsible-05.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/collapsible-05.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `collapsible`

## Files

### `registry/patterns/collapsible/collapsible-05.tsx`

```tsx
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible'
import {
  ChevronRightIcon,
  LayoutDashboardIcon,
  SettingsIcon,
} from 'lucide-react'

const groups = [
  {
    label: 'Platform',
    icon: LayoutDashboardIcon,
    defaultOpen: true,
    items: ['Overview', 'Projects', 'Deployments', 'Analytics'],
  },
  {
    label: 'Settings',
    icon: SettingsIcon,
    defaultOpen: false,
    items: ['General', 'Members', 'Billing', 'Integrations'],
  },
]

export function Collapsible05() {
  return (
    <nav className="w-full max-w-60 space-y-1 rounded-lg border p-2">
      {groups.map((group) => (
        <Collapsible key={group.label} defaultOpen={group.defaultOpen}>
          <CollapsibleTrigger className="group/nav hover:bg-accent flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium">
            <group.icon className="text-muted-foreground size-4 shrink-0" />
            {group.label}
            <ChevronRightIcon className="text-muted-foreground ml-auto size-4 shrink-0 transition-transform group-data-panel-open/nav:rotate-90" />
          </CollapsibleTrigger>
          <CollapsibleContent>
            <ul className="mt-1 ml-4 space-y-0.5 border-l pl-4">
              {group.items.map((item) => (
                <li key={item}>
                  <a
                    href="#"
                    className="hover:bg-accent text-muted-foreground hover:text-foreground block rounded-md px-2 py-1.5 text-sm"
                  >
                    {item}
                  </a>
                </li>
              ))}
            </ul>
          </CollapsibleContent>
        </Collapsible>
      ))}
    </nav>
  )
}
```