侧边栏
Basic Sidebar
A static navigation column - brand, icon-and-label links, and one clearly marked current page.
#sidebar#navigation#static
6 个框架初级
Loading…
A mini icon rail that expands to a full-width labelled sidebar on toggle.
<!-- Starts as a mini rail; the toggle expands it. Labels hide with invisible+opacity so they leave the a11y tree too. -->
<aside data-expanded="false" class="group flex w-16 flex-col gap-2 overflow-hidden border-r border-gray-200 bg-white p-2 transition-[width] duration-200 data-[expanded=true]:w-64 motion-reduce:transition-none dark:border-gray-800 dark:bg-gray-900">
<button type="button" aria-expanded="false" aria-controls="mini-nav" aria-label="Expand sidebar" class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:bg-gray-800">
<svg class="h-5 w-5" 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="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
<nav id="mini-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 p-2.5 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: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"><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>
<span class="whitespace-nowrap transition-opacity duration-200 group-data-[expanded=false]:invisible group-data-[expanded=false]:opacity-0 motion-reduce:transition-none">Dashboard</span>
</a>
</li>
</ul>
</nav>
</aside>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
items必填 | SidebarItem[] | - | 要渲染的项目数组。 |
pathname必填 | string | - | 当前路径。与之匹配的项会被标记为当前页面。 |
defaultExpanded | boolean | false | Default expanded |
className | string | - | 合并到根元素上的额外类名。 |
Starts collapsed as a `4rem` rail and animates to `16rem`; the toggle is a real button with `aria-expanded` and `aria-controls`. Labels hide with `invisible` *and* `opacity-0`, never opacity alone, so the collapsed rail does not announce names it no longer shows. `motion-reduce` lands on the end state instantly.