部品 · Navigation Patterns
ナビゲーションパターン
タブ、開閉、区切り、二値切替の共有挙動
- 利用範囲
- 選択操作のある画面
- 更新日
- 2026-07-10
プレビュー
状態と使い方
色、文字、余白、角丸、影、動きを同じ判断基準で扱います。
色、文字、余白、角丸、影、動きを同じ意味体系で更新します。
開閉、区切り、切替は共通部品で扱い、画面ごとの操作差を増やしません。
主な部品
この仕様に含まれるUI
4 件
Accordion
ナビゲーション
AnimatedRadialMenu
ナビゲーション
Separator
ナビゲーション
Tabs
ナビゲーション
解剖
Tabs
同一文脈の表示面を切り替え、現在値をstateで示す。
Accordion
縦に並ぶ補足情報を見出し単位で開閉する。
Switch
即時反映する二値設定をlabelと一緒に扱う。
Separator
意味を持たない視覚区切りとしてdecorativeに使う。
状態
active tab
背景、文字、影で現在面を示し、共通部品の標準操作を維持する。
accordion open
contentを展開し、chevronを180度回転する。
switch checked
thumb位置と面色を変え、labelを残す。
keyboard
矢印、Enter、Spaceなど各primitiveの標準操作を維持する。
仕様値
- TabsList
- height 36px、rounded-lg、padding 4px
- TabsTrigger
- 14px、px 12 / py 4px
- AccordionTrigger
- py 16px、chevron 16px
- Switch
- 56 x 32px、thumb 24px
- focus
- 2px ring + offset 2px
- Separator
- horizontal 1px / vertical 1px
運用ルール
遷移と切替を区別
URL移動はLink、同一面の切替はTabsを使う。
クリック領域をdivで作らない
操作はbuttonまたはLinkを使い、置換できない複合面だけ共通キーボード契約を適用する。
Switchは即時設定だけ
確認が必要な処理や多値選択へ使わない。
開閉後も文脈を保つ
見出しとcontentを近接させ、現在位置を失わせない。