NavigationBar

モバイル向けボトムナビゲーションバー。NavigationBar.Item で目的地を配置します。

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

Import

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

使用例

<NavigationBar.Root defaultValue={['home']}>
  <NavigationBar.Item value="home" icon={<Icon name="home" />}>ホーム</NavigationBar.Item>
  <NavigationBar.Item value="search" icon={<Icon name="search" />}>検索</NavigationBar.Item>
</NavigationBar.Root>

Props

Prop	型	既定値	説明
`defaultValue / value`	`readonly string[]`	—	選択中の目的地