注目
サイドバーCollapsible Sidebar
A sidebar that animates between 15rem and 4rem, hiding its labels and leaving the icons behind.
#sidebar#collapsible#animated
6 個のフレームワーク中級
Loading…
A static navigation column - brand, icon-and-label links, and one clearly marked current page.
<aside class="sidebar">
<a class="sidebar__brand" href="/">Adysre</a>
<nav class="sidebar__nav" aria-label="Sidebar">
<ul class="sidebar__list">
<li>
<a class="sidebar__link" href="/dashboard" aria-current="page">
<svg class="sidebar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<rect x="3" y="3" width="7" height="7" rx="1" />
<rect x="14" y="3" width="7" height="7" rx="1" />
<rect x="14" y="14" width="7" height="7" rx="1" />
<rect x="3" y="14" width="7" height="7" rx="1" />
</svg>
Dashboard
</a>
</li>
<li>
<a class="sidebar__link" href="/projects">
<svg class="sidebar__icon" 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 7a2 2 0 0 1 2-2h3l2 2h9a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" />
</svg>
Projects
</a>
</li>
<li>
<a class="sidebar__link" href="/team">
<svg class="sidebar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<circle cx="9" cy="8" r="3" />
<path d="M3 20a6 6 0 0 1 12 0" />
<path d="M16 5.5a3 3 0 0 1 0 5" />
<path d="M18 20a6 6 0 0 0-2-4.5" />
</svg>
Team
</a>
</li>
<li>
<a class="sidebar__link" href="/settings">
<svg class="sidebar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="3" />
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1.08-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" />
</svg>
Settings
</a>
</li>
</ul>
</nav>
</aside>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
items必須 | SidebarItem[] | - | レンダリングする項目の配列。 |
pathname必須 | string | - | 現在のパス。一致する項目が現在のページとして示されます。 |
title | string | 'Adysre' | カードの見出しテキスト。 |
ariaLabel | string | 'Sidebar' | ボタンのアクセシブルな名前。アイコンのみのボタンでは必須です。 |
className | string | - | ルート要素にマージされる追加クラス。 |
The active item is marked with `aria-current="page"` and the highlight is styled off that same attribute rather than a parallel `.is-active` class - one source of truth, so the blue pill and what a screen reader announces cannot drift apart. Drive it from your router: `pathname === item.href` in Next.js. The icons are decorative and carry `aria-hidden="true"`, which is correct *because* the label sits right beside them; the moment you drop the label the icon becomes the only content and needs its own name - reach for `sidebar-icon-rail` instead of stripping this one down. Nothing here holds state, so it renders as a Server Component with no `use client`. Swap the fixed `w-60` for `w-56` or `w-64` in one place; the links are `flex` and follow.