Bottom Navigation

Global tab navigation placed at the bottom for mobile and tablet.

Last updated 11/1/2024

Example

Use BottomNavigation together with consecutive BottomNavigationItems. Up to about five tabs is a guideline; consider Drawer when you need more.

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

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

Variants

BottomNavigationItem has enabled and active states and can be combined with 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={"home"} />}
        />
        <p>Default (Enable)</p>
      </VBox>
      <VBox w="25%">
        <BottomNavigationItem
          label="ホーム"
          icon={<SerendieSymbol name={"home"} />}
          isActive
        />
        <p>Active</p>
      </VBox>
      <VBox w="25%">
        <BottomNavigationItem
          label="ホーム"
          icon={<SerendieSymbol name={"home"} />}
          dot
        />
        <p>With Badge (dot)</p>
      </VBox>
      <VBox w="25%">
        <BottomNavigationItem
          label="ホーム"
          icon={<SerendieSymbol name={"home"} />}
          count={3}
        />
        <p>With Badge (number)</p>
      </VBox>
    </HBox>
  );
}