Fanvue API Documentation

import { BottomNavigation, BottomNavigationAction } from "@fanvue/ui";
import type { BottomNavigationActionProps, BottomNavigationProps } from "@fanvue/ui";

Examples

Default

import * as React from "react";
import {
  AddIcon,
  Avatar,
  BellIcon,
  BottomNavigation,
  BottomNavigationAction,
  Count,
  HomeIcon,
  MessageIcon,
} from "@fanvue/ui";

function Example() {
  const [value, setValue] = React.useState("home");
  return (
    <BottomNavigation value={value} onValueChange={setValue} aria-label="Main navigation">
      <BottomNavigationAction
        value="home"
        icon={<HomeIcon filled={value === "home"} />}
        label="Home"
      />
      <BottomNavigationAction
        value="notifications"
        icon={<BellIcon filled={value === "notifications"} />}
        label="Notifications"
        badge={
          <Count
            value={5}
            max={99}
            variant="default"
            size="24"
            className="ring-2 ring-background-primary"
          />
        }
      />
      <BottomNavigationAction value="create" icon={<AddIcon />} label="Create" />
      <BottomNavigationAction
        value="messages"
        icon={<MessageIcon filled={value === "messages"} />}
        label="Messages"
        badge={
          <Count
            value={1}
            max={99}
            variant="default"
            size="24"
            className="ring-2 ring-background-primary"
          />
        }
      />
      <BottomNavigationAction
        value="profile"
        icon={<Avatar size={32} alt="User" fallback="JD" />}
        label="Profile"
      />
    </BottomNavigation>
  );
}

Selected State

import {
  BottomNavigation,
  BottomNavigationAction,
  HomeIcon,
  LoveIcon,
  SearchIcon,
  UserIcon,
} from "@fanvue/ui";

<BottomNavigation value="favorites" aria-label="Main navigation">
  <BottomNavigationAction value="home" icon={<HomeIcon />} label="Home" />
  <BottomNavigationAction value="search" icon={<SearchIcon />} label="Search" />
  <BottomNavigationAction value="favorites" icon={<LoveIcon filled />} label="Favorites" />
  <BottomNavigationAction value="profile" icon={<UserIcon />} label="Profile" />
</BottomNavigation>

With Badges

import * as React from "react";
import {
  BottomNavigation,
  BottomNavigationAction,
  Count,
  HomeIcon,
  LoveIcon,
  SearchIcon,
  UserIcon,
} from "@fanvue/ui";

function Example() {
  const [value, setValue] = React.useState("home");
  return (
    <BottomNavigation value={value} onValueChange={setValue} aria-label="Main navigation">
      <BottomNavigationAction
        value="home"
        icon={<HomeIcon filled={value === "home"} />}
        label="Home"
      />
      <BottomNavigationAction
        value="search"
        icon={<SearchIcon filled={value === "search"} />}
        label="Search"
      />
      <BottomNavigationAction
        value="favorites"
        icon={<LoveIcon filled={value === "favorites"} />}
        label="Favorites"
        badge={
          <Count
            value={5}
            max={99}
            variant="alert"
            size="24"
            className="ring-2 ring-background-primary"
          />
        }
      />
      <BottomNavigationAction
        value="profile"
        icon={<UserIcon filled={value === "profile"} />}
        label="Profile"
      />
    </BottomNavigation>
  );
}

Information Architecture Nav – Selected State

import {
  BottomNavigation,
  BottomNavigationAction,
  HomeIcon,
  LoveIcon,
  SearchIcon,
  UserIcon,
} from "@fanvue/ui";

<BottomNavigation value="favorites" hasInformationArchitectureNav aria-label="Main navigation">
  <BottomNavigationAction value="home" icon={<HomeIcon />} label="Home" />
  <BottomNavigationAction value="search" icon={<SearchIcon />} label="Search" />
  <BottomNavigationAction value="favorites" icon={<LoveIcon filled />} label="Favorites" />
  <BottomNavigationAction value="profile" icon={<UserIcon />} label="Profile" />
</BottomNavigation>

With asChild (Links)

import * as React from "react";
import {
  BottomNavigation,
  BottomNavigationAction,
  HomeIcon,
  LoveIcon,
  SearchIcon,
  UserIcon,
} from "@fanvue/ui";

function Example() {
  const [value, setValue] = React.useState("home");
  return (
    <BottomNavigation value={value} onValueChange={setValue} aria-label="Main navigation">
      <BottomNavigationAction
        value="home"
        icon={<HomeIcon filled={value === "home"} />}
        label="Home"
        asChild
      >
        {/* biome-ignore lint/a11y/useAnchorContent: content provided by Slot */}
        <a href="#home" aria-label="Home" />
      </BottomNavigationAction>
      <BottomNavigationAction
        value="search"
        icon={<SearchIcon filled={value === "search"} />}
        label="Search"
        asChild
      >
        {/* biome-ignore lint/a11y/useAnchorContent: content provided by Slot */}
        <a href="#search" aria-label="Search" />
      </BottomNavigationAction>
      <BottomNavigationAction
        value="favorites"
        icon={<LoveIcon filled={value === "favorites"} />}
        label="Favorites"
        asChild
      >
        {/* biome-ignore lint/a11y/useAnchorContent: content provided by Slot */}
        <a href="#favorites" aria-label="Favorites" />
      </BottomNavigationAction>
      <BottomNavigationAction
        value="profile"
        icon={<UserIcon filled={value === "profile"} />}
        label="Profile"
        asChild
      >
        {/* biome-ignore lint/a11y/useAnchorContent: content provided by Slot */}
        <a href="#profile" aria-label="Profile" />
      </BottomNavigationAction>
    </BottomNavigation>
  );
}

Props

BottomNavigation

boolean

default:"false"

When true, renders the information-architecture style with visible labels and a sliding active indicator.

boolean

default:"false"

When true, the navigation bar is hidden on viewports wider than md (768 px).

((value: string) => void)

Called when the selected action changes.

string

The currently selected action value.

BottomNavigationAction

ReactElement<unknown, string | JSXElementConstructor<any>>

required

Icon element displayed in the action.

string

required

Unique value that identifies this action.

boolean

default:"false"

Merge props onto a child element instead of rendering a <button>.

ReactNode

Optional badge element (e.g. Count) rendered at the top-end corner of the icon.

string

Accessible label applied as aria-label.

Exported types

Also exported from @fanvue/ui: BottomNavigationActionProps, BottomNavigationProps.

Setup: Installation · Theming

Getting Started

Actions

Forms & Inputs

Overlays & Dialogs

Navigation

Data Display

Feedback & Status

Layout

Media & Audio

Creator & Social

Charts

Icons & Flags

Utility

BottomNavigation

Examples

Default

Selected State

With Badges

Information Architecture Nav – Selected State

With asChild (Links)

Props

BottomNavigation

BottomNavigationAction

Exported types

​Examples

​Default

​Selected State

​With Badges

​Information Architecture Nav – Selected State

​With asChild (Links)

​Props

​BottomNavigation

​BottomNavigationAction

​Exported types

Examples

Default

Selected State

With Badges

Information Architecture Nav – Selected State

With asChild (Links)

Props

BottomNavigation

BottomNavigationAction

Exported types