Sidebars
Basic Sidebar
A static navigation column - brand, icon-and-label links, and one clearly marked current page.
#sidebar#navigation#static
6 frameworksBeginner
Loading…
Nav links carrying numeric badges that pair the count with a screen-reader context word.
<aside class="flex w-64 flex-col gap-4 border-r border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
<nav aria-label="Sidebar">
<ul class="flex flex-col gap-0.5">
<li>
<a href="/inbox" aria-current="page" class="flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 aria-[current=page]:bg-blue-50 aria-[current=page]:text-blue-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:aria-[current=page]:bg-blue-900 dark:aria-[current=page]:text-blue-200">
<svg class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 12h5l2 3h4l2-3h5"/><path d="M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z"/></svg>
<span class="flex-1">Inbox</span>
<!-- The count pairs a number with a screen-reader context word, so it is not meaning-by-colour. -->
<span class="rounded-full bg-blue-600 px-1.5 py-0.5 text-xs font-semibold text-white">12<span class="sr-only"> unread</span></span>
</a>
</li>
<li>
<a href="/tasks" class="flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50">
<svg class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>
<span class="flex-1">Tasks</span>
<span class="rounded-full border border-gray-300 px-1.5 py-0.5 text-xs font-semibold text-gray-600 dark:border-gray-600 dark:text-gray-300">3<span class="sr-only"> due</span></span>
</a>
</li>
</ul>
</nav>
</aside>| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | BadgeItem[] | - | The array of items to render. |
pathnamerequired | string | - | The current path. The item matching it is marked as the active page. |
className | string | - | Additional classes merged onto the root element. |
The badge is not meaning-by-colour: each count carries an `sr-only` word (`unread`, `due`) so a screen reader announces "Inbox 12 unread", not a bare number beside a coloured pill. Pass `count` and `countLabel` per item; omit `count` for no badge.