Pill Nav
作用中項目滑動高亮的極簡藥丸導航。
作用中項目切換時，高亮藥丸以彈簧動態在項目之間平滑滑動，支援圖示、受控/非受控用法與鍵盤操作。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
380
32
<PillNav />
安裝
npx shadcn@latest add https://webberui.com/r/pill-nav.json或在 components.json 設定 registries 後，改用 @webberui/pill-nav 安裝。
安裝依賴後，從 registry JSON（/r/pill-nav.json 的 files[0].content）複製 pill-nav.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { Compass, Home, Settings, User } from "lucide-react";
import { PillNav } from "@/components/ui/pill-nav";
<PillNav
defaultValue="Discover"
items={[
{ label: "Home", icon: Home },
{ label: "Discover", icon: Compass },
{ label: "Profile", icon: User },
{ label: "Settings", icon: Settings },
]}
/>;作為連結列時，為每個項目加上 href，元件會渲染成 <a>：
<PillNav
items={[
{ label: "Docs", href: "/docs" },
{ label: "Blog", href: "/blog" },
]}
/>受控用法
以 value 與 onValueChange 接管作用中狀態：
const [tab, setTab] = React.useState("Home");
<PillNav
value={tab}
onValueChange={setTab}
items={[{ label: "Home" }, { label: "Discover" }]}
/>;Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
items | PillNavItem[] | — | 導航項目清單 |
defaultValue | string | 第一項 | 非受控初始作用中項目（label） |
value | string | — | 受控作用中項目（label） |
onValueChange | (value: string) => void | — | 作用中項目改變時觸發 |
stiffness | number | 380 | 滑動高亮的彈簧剛性 |
damping | number | 32 | 滑動高亮的彈簧阻尼 |
其中 PillNavItem 形狀為 { label: string; href?: string; icon?: LucideIcon }。label 同時作為唯一識別值。
可及性
- 作用中項目帶
aria-current="page"，輔助科技可辨識目前位置 - 每個項目都是原生
<button>或<a>，可用 Tab 聚焦、Enter 觸發，並帶focus-visible焦點環 - 使用者系統開啟「減少動態效果」時，高亮改為瞬間切換、不做滑動動畫
客製
高亮與焦點環顏色以 --wb-* CSS 變數暴露，可用 className 覆寫：
--wb-pill-active-bg：作用中藥丸背景--wb-pill-active-fg：作用中文字顏色--wb-pill-ring：focus-visible焦點環顏色