# Sidebar
Holds persistent navigation in a 204px rail with a head, body, and foot.
Category: navigation
Name: `sidebar`
Also known as: Sidebar, Side nav, Rail, Navigation drawer
Page: https://vlak.dev/components/sidebar/
## When to use
- A 204px rail for app or docs navigation with a head, groups of links, and a foot.
- SidebarLabel to name each group of items.
## When not to
- Marketing sites; use NavigationMenu.
- Collapsing it on desktop; the rail is the layout.
## Install
**React package.** Precompiled; no compiler to configure.
```sh
npm install @noorddev/vlak-react
```
```tsx
import "@noorddev/vlak-react/css";
import { Sidebar, SidebarFoot, SidebarHead, SidebarItem, SidebarLabel, SidebarNav } from "@noorddev/vlak-react";
```
**Vendor the source.** The StyleX leaf lands in `components/vlak/` for your compiler to own.
```sh
npx @noorddev/vlak-cli add sidebar
```
**shadcn registry.** Same files, through the shadcn CLI.
```sh
npx shadcn add https://vlak.dev/r/sidebar.json
```
**CSS only.** `rs-*` classes on plain markup, styled by `@noorddev/vlak/css`.
```html
```
## Example
```tsx
import { Sidebar, SidebarFoot, SidebarHead, SidebarItem, SidebarLabel, SidebarNav } from "@noorddev/vlak-react";
Vlak
Go to
Overview
Docs
Components
0.3
```
## Props
### Sidebar
One 204 module rail. Flush items, hairline edge.
Extends `HTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `HTMLElement`.
No props of its own.
### SidebarFoot
Extends `HTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `HTMLDivElement`.
No props of its own.
### SidebarHead
Extends `HTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `HTMLDivElement`.
No props of its own.
### SidebarItem
Extends `AnchorHTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `HTMLAnchorElement`.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `current` | `boolean` | | |
### SidebarLabel
Extends `HTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `HTMLParagraphElement`.
No props of its own.
### SidebarNav
Extends `HTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `HTMLElement`.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-label` | `string` | `"Sidebar"` | Landmark name; pages carry several navs. |
## Keyboard
| Keys | Does |
| --- | --- |
| Tab | Moves between the items |
| Enter | Follows the link |
## Accessibility
- Sidebar is an