# Sidebar

> Main navigation.

Source: https://ui.jcsoftdev.com/docs/components/sidebar

Main navigation. Always visible when its app container is wide; an off-canvas drawer under
900 px of container width, `inert` while closed so it is not reachable by keyboard.
Render it inside `AppShell`: the container decides, never the viewport. Without an `AppShell`
it measures its parent element instead.

## Import

```ts
import { Sidebar } from "@jcsoftdev/ui/shell";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/shell/sidebar`.

## Usage

```tsx
<Sidebar
  groups={groups}
  ariaLabel="Navegación principal"
  header={header}
  footer={footer}
  open={false}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `groups` * | `SidebarGroup[]` |  |  |
| `ariaLabel` * | `string` |  | Accessible name of the sidebar landmark. |
| `header` | `ReactNode` |  | Brand block shown at the top. |
| `footer` | `ReactNode` |  | Block pinned to the bottom (e.g. the current user). |
| `renderLink` | `SidebarRenderLink` | `defaultRenderLink` | Link renderer; defaults to a plain anchor. |
| `open` | `boolean` | `false` | Drawer state when the app container is under 900 px. Ignored above it, where the sidebar is always visible. |
| `onClose` | `(() => void)` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/shell-sidebar--default)
- [Without Header And Footer](/storybook/?path=/story/shell-sidebar--without-header-and-footer)
- [Custom Link](/storybook/?path=/story/shell-sidebar--custom-link)
- [Mobile Drawer](/storybook/?path=/story/shell-sidebar--mobile-drawer)

## Source

`packages/ui/src/shell/sidebar/sidebar.tsx`