Thinca Design System

Home / Components / Side Nav

Side Nav

同一画面内で縦に並ぶビューを切り替えるための、カード左端に配置する縦型ナビゲーション。選択しても URL は変わらず、同じカード内の右側の表示領域だけが切り替わります。カイクラの管理画面での利用を想定しています。

プレビュー

管理画面のサイドナビ例。1 番上の「顧客情報管理」が選択中の状態。

状態

Item は Normal / Hover / Current の 3 状態を持ちます。Current (選択中) は左に 2px の Action Primary ボーダーと 16% 透過の青背景・青文字で表示。
Normal
テキスト
Hover
テキスト
Current (選択中)
テキスト

実装例

"use client";

import { SideNav, SideNavList, SideNavItem, SideNavPanel } from "@/components/SideNav";

export function AdminScreen() {
  return (
    <Card>
      <SideNav defaultValue="customers">
        <SideNavList ariaLabel="管理メニュー">
          <SideNavItem value="customers" label="顧客情報管理" />
          <SideNavItem value="users" label="システムユーザー管理" />
          <SideNavItem value="calls" label="会話履歴管理" />
          <SideNavItem value="settings" label="環境設定" />
        </SideNavList>

        <SideNavPanel value="customers">顧客情報管理の内容</SideNavPanel>
        <SideNavPanel value="users">システムユーザー管理の内容</SideNavPanel>
        <SideNavPanel value="calls">会話履歴管理の内容</SideNavPanel>
        <SideNavPanel value="settings">環境設定の内容</SideNavPanel>
      </SideNav>
    </Card>
  );
}

仕様

Side Nav (枠)

  • width272px (width/col/2)
  • height配置先の高さいっぱい
  • background#FFFFFF (bg/surface)
  • border-right1px solid #D1D5DB (border/default)
  • padding8px 0 (spacing/xxs)
  • gap (項目間)0 (spacing/none)
  • shadow0 1px 2px 0 rgba(31,41,55,.30) (LAYER1)

Item

  • 要素button (画面遷移しないため a は使わない)
  • 土台Radix Tabs (orientation=vertical)
  • height40px
  • padding8px 32px (spacing/xxs・spacing/m)
  • gap (label ↔ chevron)8px
  • chevron size12px (caret-right)
  • label14px / Medium / #1F2937 (text/primary)
  • Hover bgrgba(31, 41, 55, 0.08)
  • Current bgrgba(0, 102, 204, 0.16)
  • Current text / chevron#0066CC (action/primary)
  • Current border-left2px solid #0066CC

アクセシビリティ

  • コンテナrole="tablist" + aria-orientation="vertical"
  • 項目role="tab" + aria-selected + aria-controls
  • 表示領域role="tabpanel" + aria-labelledby (Radix が自動配線)
  • キーボード↑↓ で項目を移動、Enter / Space で切り替え
  • activationModemanual (矢印キーで移動しただけでは切り替わらない)

利用基準

使うべき時

  • 同一画面内で縦に並ぶビューを切り替える操作に使う
  • 管理画面など、切り替え対象が多く一覧性が必要な場面に使う
  • 表示中のビューに対応する項目を Current 状態にする
  • ラベルは切り替え先のビュー名をそのまま使い、省略しない

使わない時

  • URL が変わる画面遷移に使う → Navigation-Menu を使用
  • 切り替え対象が少なくナビゲーションが不要な場合に使う → Tabs を使用
  • Side Nav で切り替えたビューの中で、さらに Side Nav を使う → Tabs を使用
  • Current 状態の項目を同時に 2 つ以上にする

Figma