组件
导航
纯语义化 HTML 实现的基础导航栏组件。
查看源码
<nav>
<ul>
<li><strong>Acme Corp</strong></li>
</ul>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
</ul>
</nav><ul> 会自动水平分布。
<li> 不带样式且内联排列。
<a> 仅在 :hover 时显示下划线。
链接变体
你可以使用 .secondary、.contrast 和 .outline 类（无类版本中不可用）。
查看源码
<nav>
<ul>
<li><strong>Acme Corp</strong></li>
</ul>
<ul>
<li><a href="#" class="contrast">About</a></li>
<li><a href="#" class="contrast">Services</a></li>
<li><a href="#" class="contrast">Products</a></li>
</ul>
</nav>查看源码
<nav>
<ul>
<li><a href="#" class="secondary">...</a></li>
</ul>
<ul>
<li><strong>Acme Corp</strong></li>
</ul>
<ul>
<li><a href="#" class="secondary">...</a></li>
</ul>
</nav>按钮
你可以在 <li> 内使用 <button>。
按钮的尺寸会自动匹配链接的大小与外边距。
查看源码
<nav>
<ul>
<li><strong>Acme Corp</strong></li>
</ul>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><button class="secondary">Products</button></li>
</ul>
</nav>下拉菜单
你可以在 Nav 内使用下拉菜单。
查看源码
<nav>
<ul>
<li><strong>Acme Corp</strong></li>
</ul>
<ul>
<li><a href="#" class="secondary">Services</a></li>
<li>
<details class="dropdown">
<summary>
Account
</summary>
<ul dir="rtl">
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Logout</a></li>
</ul>
</details>
</li>
</ul>
</nav>垂直堆叠
在 <aside> 内，导航条目会垂直堆叠。
查看源码
<aside>
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
</ul>
</nav>
</aside>面包屑
使用 <nav aria-label="breadcrumb">，可以把导航变成面包屑。
查看源码
<nav aria-label="breadcrumb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li>Design</li>
</ul>
</nav>你可以通过局部 CSS 自定义属性 --pico-nav-breadcrumb-divider 更换分隔符。
查看源码
<nav
aria-label="breadcrumb"
style="--pico-nav-breadcrumb-divider: '✨';"
>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li>Design</li>
</ul>
</nav>溢出
<nav> 组件在容器上使用 overflow: visible;，并在子元素上使用负外边距，让链接在键盘导航下拥有美观的 ::focus-visible 样式，同时保持内容水平对齐。