PackagesUIComponents
Sidebar
画面左に固定配置される縦長のナビゲーション領域。開閉によるアイコンのみ表示に対応する。
いつ使うか
- アプリケーションの主要ナビゲーションを画面左に配置する
AppShellのsidebarスロットに渡して使用する
いつ使わないか
- ヘッダー内の水平ナビゲーションには使わない。
Navを使用する - 一時的なメニュー（右クリックメニュー等）には使わない。
DropdownMenuを使用する
Usage
import { SideNav, SideNavItem } from '@bi-shop-it/ui/side-nav';
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarHeader,
SidebarToggle,
} from '@bi-shop-it/ui/sidebar';
<Sidebar>
<SidebarHeader>
<SidebarToggle />
</SidebarHeader>
<SidebarContent>
<SideNav>
<SideNavItem href="/home" icon="Home" isActive>
ホーム
</SideNavItem>
<SideNavItem href="/notes" icon="File">
読書ノート
</SideNavItem>
</SideNav>
</SidebarContent>
<SidebarFooter>
<SideNav>
<SideNavItem href="/settings" icon="Settings">
設定
</SideNavItem>
</SideNav>
</SidebarFooter>
</Sidebar>;コンポーネント構成
| コンポーネント | エクスポート元 | 説明 |
|---|---|---|
Sidebar | @bi-shop-it/ui/sidebar | 最外殻。開閉状態を管理する |
SidebarHeader | @bi-shop-it/ui/sidebar | 上部の固定領域 |
SidebarContent | @bi-shop-it/ui/sidebar | スクロール可能な中央領域 |
SidebarFooter | @bi-shop-it/ui/sidebar | 下部の固定領域 |
SidebarToggle | @bi-shop-it/ui/sidebar | 開閉ボタン |
SideNav | @bi-shop-it/ui/side-nav | 縦並びナビゲーションリスト |
SideNavItem | @bi-shop-it/ui/side-nav | 個別のナビゲーションリンク |
Props
Sidebar
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
children | ReactNode | — | SidebarHeader, SidebarContent, SidebarFooter を配置する |
defaultCollapsed | boolean | false | 初期状態で折りたたむかどうか |
SidebarToggle
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
collapseLabel | string | '閉じる' | 展開時のアクセシビリティラベル |
expandLabel | string | '開く' | 折りたたみ時のアクセシビリティラベル |
SideNavItem
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
children | ReactNode | — | リンクのラベルテキスト |
href | string | — | リンク先のURL |
icon | IconName | — | 左側に表示するアイコン |
isActive | boolean | false | 現在のページかどうか |
バリエーション
デフォルト
トグルボタンをクリックすると、ラベルが非表示になりアイコンのみの表示に切り替わる。
メインコンテンツ領域
<Sidebar>
<SidebarHeader>
<SidebarToggle />
</SidebarHeader>
<SidebarContent>
<SideNav>
<SideNavItem href="/home" icon="Home" isActive>
ホーム
</SideNavItem>
<SideNavItem href="/notes" icon="File">
読書ノート
</SideNavItem>
<SideNavItem href="/search" icon="Search">
検索
</SideNavItem>
<SideNavItem href="/favorites" icon="Star">
お気に入り
</SideNavItem>
</SideNav>
</SidebarContent>
<SidebarFooter>
<SideNav>
<SideNavItem href="/settings" icon="Settings">
設定
</SideNavItem>
</SideNav>
</SidebarFooter>
</Sidebar>AppShell との組み合わせ
import { AppShell } from '@bi-shop-it/ui/app-shell';
<AppShell
header={<Header />}
sidebar={
<Sidebar>
<SidebarContent>
<SideNav>
<SideNavItem href="/home" icon="Home">
ホーム
</SideNavItem>
</SideNav>
</SidebarContent>
</Sidebar>
}
>
{children}
</AppShell>;アクセシビリティ
コンポーネントが内部で処理すること
Sidebarは<aside>要素としてレンダリングされ、ランドマークとして認識されるSideNavは<nav aria-label="サイドナビゲーション">でランドマークを提供するSideNavItemはアクティブ時にaria-current="page"を付与するSidebarToggleは状態に応じたaria-labelを提供する- アイコンに
aria-hidden="true"を付与し、スクリーンリーダーから隠す
利用者が対応すること
- 特になし
関連コンポーネント
Nav— ヘッダー内の水平ナビゲーションに使用するAppShell— Sidebar をsidebarスロットに渡してレイアウトを構成する