部品 · Navigation Patterns
ナビゲーションパターン
タブ、開閉、区切り、二値切替の共有挙動
- 利用範囲
- 選択操作のある画面
- 更新日
- 2026-07-10
プレビュー
状態と使い方
色、文字、余白、角丸、影、動きを同じ判断基準で扱います。
色、文字、余白、角丸、影、動きを同じ意味体系で更新します。
開閉、区切り、切替は共通部品で扱い、画面ごとの操作差を増やしません。
主な部品
この仕様に含まれるUI
5 件
Accordion
ナビゲーション
AnimatedRadialMenu
ナビゲーション
Separator
ナビゲーション
Tabs
ナビゲーション
PageShare
ナビゲーション
解剖
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を近接させ、現在位置を失わせない。