NavigationDrawer

モーダル／標準／永続の M3 ナビゲーションドロワー。NavigationDrawer.Item でメニュー項目を構成します。

参考: Material Design 3 公式ガイドライン m3.material.io/components/navigation-drawer/overview

Import

import { NavigationDrawer, ThemeProvider } from '@m3-baseui/react-tailwind';

使用例

<NavigationDrawer.Root variant="modal" aria-label="メール">
  <NavigationDrawer.Headline>メール</NavigationDrawer.Headline>
  <NavigationDrawer.Item leading={<Icon name="inbox" />} selected>
    受信トレイ
  </NavigationDrawer.Item>
  <NavigationDrawer.Item leading={<Icon name="send" />}>
    送信済み
  </NavigationDrawer.Item>
</NavigationDrawer.Root>

Props

Prop	型	既定値	説明
`NavigationDrawer.Root variant`	`'modal' \| 'standard' \| 'persistent'`	—	ドロワー種別
`NavigationDrawer.Item selected`	`boolean`	—	選択状態