侧边栏
Basic Sidebar
A static navigation column - brand, icon-and-label links, and one clearly marked current page.
#sidebar#navigation#static
6 个框架初级
Loading…
A committed-dark navigation column that needs no light styles and no `dark:` toggle to look right.
<!-- A committed-dark shell: no light styles, so it does not depend on a dark: toggle. -->
<aside class="flex w-64 flex-col gap-4 bg-gray-950 p-4">
<a href="/" class="flex items-center gap-2 px-2 text-base font-bold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400">
<span class="grid h-7 w-7 place-items-center rounded-md bg-indigo-500 text-sm text-white" aria-hidden="true">A</span>
Adysre
</a>
<nav aria-label="Sidebar">
<ul class="flex flex-col gap-0.5">
<li>
<a href="/dashboard" aria-current="page" class="flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-gray-400 hover:bg-gray-800 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 aria-[current=page]:bg-gray-800 aria-[current=page]:text-white">
<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"><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 href="/projects" class="flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-gray-400 hover:bg-gray-800 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400">
<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 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 href="/team" class="flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-gray-400 hover:bg-gray-800 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400">
<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"><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>
</ul>
</nav>
</aside>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
items必填 | SidebarItem[] | - | 要渲染的项目数组。 |
pathname必填 | string | - | 当前路径。与之匹配的项会被标记为当前页面。 |
title | string | 'Adysre' | 卡片的标题文本。 |
ariaLabel | string | 'Sidebar' | 按钮的无障碍名称。仅有图标的按钮必须设置。 |
className | string | - | 合并到根元素上的额外类名。 |
Every colour is chosen for a dark surface, so it renders correctly with or without a `dark` class on the root. The active item is marked with `aria-current="page"` and highlighted off that attribute - one source of truth. Swap the indigo accent for any brand hue in the brand chip and the focus ring.