# Sidebar

> A 56px icon rail. The active icon fills and a ◆ travels to it. Routing stays yours: pass active and your link component.

Section: Layout. Docs: https://entrepta.vercel.app/docs/components/sidebar

## Install

```bash
npx @entrepta/cli@latest add sidebar
```

Files: `layout/sidebar.tsx`, `lib/motion.ts`.
npm packages: `@phosphor-icons/react`, `motion`.
Comes with: `motion-lib`.

## Usage

```tsx
import { Sidebar } from "@/components/entrepta/sidebar"
import { FileMdIcon, HouseLineIcon } from "@phosphor-icons/react"
import Link from "next/link"

const ITEMS = [
  { id: "home", label: "Home", href: "/", icon: HouseLineIcon },
  { id: "blog", label: "Blog", href: "/blog", icon: FileMdIcon },
]

<Sidebar items={ITEMS} active={current} linkComponent={Link} logo={<Logo />} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `{ id, label, href, icon }[]` | - | Icons are Phosphor components |
| `active` | `string` | - | Id of the current item |
| `linkComponent` | `ElementType` | "a" | Your router's link |
| `logo` | `ReactNode` | - | Top of the rail |