`. |
| `className` | `string` | no | — | — |
| `style` | `CSSProperties` | no | — | — |
## Examples
### Basics
Compose `Sidebar` from `Sidebar.Group`s, each a `Sidebar.GroupLabel` (mono uppercase) over a run of `Sidebar.Item`s. The current item takes `active`, which inks it and grows a 2px accent left rule.
```tsx
import { Sidebar } from "@protocore/pds";
export default function SidebarBasics() {
return (
Overview
Dashboard
Nodes
Peers
Ledger
Blocks
Transactions
Validators
);
}
```
### Collapsible groups
Set `collapsible` on a `Sidebar.Group` and give it a `label` — the label becomes a Radix Collapsible trigger with a chevron, and the items expand and collapse beneath it. Control it with `open`/`defaultOpen`/`onOpenChange`.
```tsx
import { Sidebar } from "@protocore/pds";
export default function SidebarCollapsible() {
return (
Regions
Instances
Networking
API keys
Members
Audit log
);
}
```
## Do & don't
**Do**
- Group related destinations under a GroupLabel so the rail scans quickly.
- Mark exactly one Item active per view to anchor the user.
- Use asChild on Sidebar.Item to wrap your router's Link component.
**Don't**
- Use a Sidebar to switch tabs within one page — that is the Tabs component.
- Leave more than one Item active at a time.
- Nest another scrolling region inside the rail; let AppShell own the layout.
## Accessibility
**Keyboard**
| Keys | Action |
| --- | --- |
| `Tab` | Move focus to the next item or group trigger |
| `Shift + Tab` | Move focus to the previous item or trigger |
| `Enter` | Follow the focused item, or toggle a collapsible group's trigger |
| `Space` | Toggle the focused collapsible group trigger |
**Notes**
- The root renders an `