Bottom Navigationボトムナビゲーション

画面下部に配置するモバイルやタブレット向けのグローバルなタブナビゲーションです。

更新 2024/11/1

サンプル

BottomNavigation内で、BottomNavigationItemを連ねて使用します。最大5タブ程度が目安です。それ以上になる場合は、Drawerなど別のナビゲーションを検討してください。

import { BottomNavigation, BottomNavigationItem } from "@serendie/ui";
import { SerendieSymbol } from "@serendie/symbols";

export function Sample() {
  return (
    <BottomNavigation>
      <BottomNavigationItem
        icon={<SerendieSymbol name="texture" />}
        label="検索"
      />
      <BottomNavigationItem
        icon={<SerendieSymbol name="texture" />}
        label="ホーム"
        isActive
      />
      <BottomNavigationItem
        icon={<SerendieSymbol name="texture" />}
        label="トーク"
        dot
      />
      <BottomNavigationItem
        icon={<SerendieSymbol name="texture" />}
        label="カレンダー"
        count={3}
      />
      <BottomNavigationItem
        icon={<SerendieSymbol name="texture" />}
        label="アカウント"
        count={100}
      />
    </BottomNavigation>
  );
}

バリエーション

BottomNavigationItemにはEnable状態とActive状態があります。またNotificationBadgeを組み合わせて使用できます。

Default (Enable)

Active

With Badge (dot)

With Badge (number)

import { HBox, VBox } from "@/components/LayoutUtils";
import { BottomNavigationItem } from "@serendie/ui";
import { SerendieSymbol } from "@serendie/symbols";

export function ItemSample() {
  return (
    <HBox>
      <VBox w="25%">
        <BottomNavigationItem
          label="ホーム"
          icon={<SerendieSymbol name={"texture"} />}
        />
        <p>Default (Enable)</p>
      </VBox>
      <VBox w="25%">
        <BottomNavigationItem
          label="ホーム"
          icon={<SerendieSymbol name={"texture"} />}
          isActive
        />
        <p>Active</p>
      </VBox>
      <VBox w="25%">
        <BottomNavigationItem
          label="ホーム"
          icon={<SerendieSymbol name={"texture"} />}
          dot
        />
        <p>With Badge (dot)</p>
      </VBox>
      <VBox w="25%">
        <BottomNavigationItem
          label="ホーム"
          icon={<SerendieSymbol name={"texture"} />}
          count={3}
        />
        <p>With Badge (number)</p>
      </VBox>
    </HBox>
  );
}