侧边栏
Basic Sidebar
A static navigation column - brand, icon-and-label links, and one clearly marked current page.
#sidebar#navigation#static
6 个框架初级
Loading…
A 4rem rail of icon-only links, each with a tooltip on hover and on keyboard focus.
<!--
Each link carries an aria-label. The tooltip is a hover affordance for sighted
mouse users and nothing more - it is not the accessible name, and on a touch
device it never appears at all.
-->
<nav class="rail" aria-label="Sidebar">
<ul class="rail__list">
<li class="rail__item">
<a class="rail__link" href="/dashboard" aria-label="Dashboard" aria-current="page">
<svg class="rail__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>
</a>
<span class="rail__tip" aria-hidden="true">Dashboard</span>
</li>
<li class="rail__item">
<a class="rail__link" href="/projects" aria-label="Projects">
<svg class="rail__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>
</a>
<span class="rail__tip" aria-hidden="true">Projects</span>
</li>
<li class="rail__item">
<a class="rail__link" href="/team" aria-label="Team">
<svg class="rail__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>
</a>
<span class="rail__tip" aria-hidden="true">Team</span>
</li>
<li class="rail__item">
<a class="rail__link" href="/settings" aria-label="Settings">
<svg class="rail__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="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6 17 7M7 17l-1.4 1.4" />
</svg>
</a>
<span class="rail__tip" aria-hidden="true">Settings</span>
</li>
</ul>
</nav>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
items必填 | RailItem[] | - | 要渲染的项目数组。 |
pathname必填 | string | - | 当前路径。与之匹配的项会被标记为当前页面。 |
ariaLabel | string | 'Sidebar' | 按钮的无障碍名称。仅有图标的按钮必须设置。 |
className | string | - | 合并到根元素上的额外类名。 |
A tooltip is not an accessible name. It is a hover affordance for sighted mouse users, it does not exist for a screen reader, and on a touch device it does not exist at all - so every link carries its own `aria-label` and the tooltip is `aria-hidden="true"` decoration that repeats it. Get this wrong and the rail announces as four unnamed links. The tooltip appears on `group-hover` **and** `group-focus-within`; drop the second and the rail becomes a mouse-only control the moment someone Tabs through it. Targets are `h-10 w-10` - comfortably past the 24px minimum, and worth keeping there since a rail is often the densest thing on the page. Stateless CSS-only tooltips mean no `use client` and no JavaScript. If your labels run long, cap the tooltip with `max-w-48` and drop `whitespace-nowrap`.