Navigation
Installation
import { Navigation } from "@olab/components";Overview
垂直的側欄導覽清單，用在頁面左側的分類或區段切換。每一項 32px 高，可以帶數量或一個提醒圓點（badge，目前畫面上看不見，見 Spec）；有子項的會出現箭頭，點開後縮排列出子項。
一次只展開一個父項；點另一個父項時，原本展開的會收起來。目前所在的那一項文字轉成品牌色，沒有底色。
Interactive Demo
ACCORDION — clicking a parent expands its children (one at a time)
Markets
Portfolio
Watchlist
3
Rewards
active = "markets-trending"
State Matrix
ITEM STATES — static snapshot
inactive
Watchlist
active (selected)
Watchlist
hover (sim)
Watchlist
with count
Watchlist
3
with badge
Rewards
parent · collapsed
Markets
parent · expanded
Markets
child · active
Markets
沒有 pressed 狀態：按下時沒有額外回饋，只有 hover 底色（見 Spec）。
Examples
DEFAULT EXPANDED — Portfolio open on first render
Markets
Portfolio
Watchlist
3
Rewards
Spec
| Part | Value | Source class |
|---|---|---|
| Item | 高 32px，左右 8px，圓角 4px | h-8 px-2 rounded |
| Item gap | 4px | gap-1 |
| Label | 14px medium | MediumText font-medium text-primary |
| Label · active | 品牌色文字，沒有底色 | text-brand-secondary |
| Item · hover | 淡底 | hover:bg-secondary |
| Item · pressed | 沒有定義 | |
| Count | 12px | SmallText text-quaternary |
| Badge | 8px 圓點；目前透明、看不見：style.css 沒有定義 --color-error-500 | bg-error-500 h-2 w-2 rounded-full |
| Chevron | 16px，展開時轉 180°（0.15s） | chevronDown size sm |
| Child indent | 左縮 16px | pl-4 |
| Transition | 200ms linear | transition-all duration-200 ease-linear |
數值為 2026-06-11 在 dark 模式下的實測（getComputedStyle）；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/navigation.md。
Usage
Do
- 頁面左側的分類、篩選區段切換，例如 Asset Prediction 的資產分類。
- 需要告訴使用者某區有幾項時用 count；有新東西需要注意時才用 badge。
- 子項只放一層；分類更深時考慮換成別的導覽方式。
Don't
- 不要拿來做頁面頂部的主導覽或分頁切換；那是 header 與 Tabs 的工作。
- 不要每一項都掛 badge；紅點多了就沒人看。
- 不要用 className 幫選中項加底色或左側色條；選中的樣子由元件決定。
Links
- Measured spec
- live-ds-spec/navigation.md