Navigation

The Navigation component is used to create a navigation bar typically placed at the top, bottom or the side of an app. It allows users to switch between different sections or views within the app.

Usage

import { BakaBottomNavigation, BakaNavigationItem, BakaIcon, BakaText, BakaBadge } from "baka-ui";

// Inside your component
<BakaNavigation>
  <BakaNavigationItem selected={true}>
    <BakaIcon variant={"filled"}>fiber_manual_record</BakaIcon>
    <BakaText>BakaText</BakaText>
  </BakaNavigationItem>
</BakaNavigation>;

Variants

The Navigation component supports three variants — rail, bottom, and side.

Rail

The following example demonstrates the Navigation component with the rail variant.

Bottom

The following example demonstrates the Navigation component with the bottom variant.

Bottom with Labels

The following example demonstrates the Navigation component with the bottom variant and labels.

Side

The following example demonstrates the Navigation component with the side variant.