---
title: "SideNav"
description: "Grouped side navigation with an active state, counts and an optional footer. A plain click is intercepted to navigate without a reload; modified clicks still open new tabs."
kind: block
id: C-054
category: erp
registry: "side-nav"
docs: "https://koten.codehive.com.co/blocks/erp/side-nav"
markdown: "https://koten.codehive.com.co/md/blocks/erp/side-nav.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/side-nav.json"
language: en
---

# SideNav · サイドバー

> Block C-054 in the Koten UI catalog.

Grouped side navigation with an active state, counts and an optional footer. A plain click is intercepted to navigate without a reload; modified clicks still open new tabs.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/side-nav.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/side-nav.json
```

## Files

- `@/components/patterns/side-nav.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Composition

This block composes Koten primitives. Read the source files above before changing its anatomy.

## Examples

### Groups and active state

Click an item: aria-current=page and the primary bar move together.

```tsx
const groups = [
  {
    id: "operations",
    label: "Operations",
    items: [
      { id: "dashboard", label: "Dashboard", href: "/dashboard" },
      { id: "orders", label: "Orders", href: "/orders", active: true, count: 22 },
    ],
  },
  {
    id: "data",
    label: "Data",
    items: [
      { id: "products", label: "Products", href: "/products" },
      { id: "inventory", label: "Inventory", href: "/inventory", count: 4 },
    ],
  },
];

<SideNav
  label="Main navigation"
  groups={groups}
  onNavigate={(href) => router.push(href)}
/>
```

### Counts and footer

Counts are tabular text and the footer holds the session without competing with navigation.

```tsx
<SideNav
  label="Main navigation"
  groups={groups}
  onNavigate={(href) => router.push(href)}
  footer={
    <div className="px-2 py-1">
      <p className="text-xs font-semibold text-ink">Yamada Tarō</p>
      <p className="text-2xs text-muted">Tokyo · Admin</p>
    </div>
  }
/>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `groups` | `readonly SideNavGroup[]` | `—` | Groups with id, label and items; each item accepts active, icon and count. |
| `label` | `string` | `—` | aria-label of the nav; describes the set of links. |
| `onNavigate` | `(href: string) => void` | `—` | Receives the href on plain clicks and the component calls preventDefault; modified clicks are not intercepted. |
| `footer` | `ReactNode` | `—` | Footer after a rule; session, help or secondary links. |
| `className` | `string` | `—` | Adds to the component's base classes. |

## Accessibility

- The active item uses aria-current="page"; the bar and background reinforce the colour.
- onNavigate intercepts plain clicks only: Cmd, Ctrl, Shift, Alt and middle click still open a tab.
- The count is tabular text inside the link, so the accessible name includes the label and the number.
- Each group uses an h2 inside the nav; do not add another h1 in the bar.

## Sources

- Catalog page: https://koten.codehive.com.co/blocks/erp/side-nav
- Markdown: https://koten.codehive.com.co/md/blocks/erp/side-nav.md
- Repository: https://github.com/codehive-colombia/koten