React Bottom Navigation - Flowbite

Use the bottom navigation bar component to allow users to navigate through your website or create a control bar using a menu that is positioned at the bottom of the page

The bottom bar component can be used to allow menu items and certain control actions to be performed by the user through the use of a fixed bar positioning on the bottom side of your page.

Check out multiple examples of the bottom navigation component based on various styles, controls, sizes, content and leverage the utility classes from Tailwind CSS to integrate into your own project.

Default bottom navigation#

Use the default bottom navigation bar example to show a list of menu items as buttons to allow the user to navigate through your website based on a fixed position. You can also use anchor tags instead of buttons.

Edit on GitHub
"use client";

import { BottomNavigation } from "flowbite-react";

function Component() {
  return (
    <BottomNavigation>
      <BottomNavigation.Item label="Home" icon={AiFillHome} />
      <BottomNavigation.Item label="Wallet" icon={GiWallet} />
      <BottomNavigation.Item label="Settings" icon={GiSettingsKnobs} />
      <BottomNavigation.Item label="Profile" icon={CgProfile} />
    </BottomNavigation>
  )
}

Menu items with border#

This example can be used to show a border between the menu items inside the bottom navigation bar.

Edit on GitHub
"use client";

import { BottomNavigation } from "flowbite-react";

function Component() {
  return (
    <BottomNavigation bordered>
      <BottomNavigation.Item label="Home" icon={AiFillHome} />
      <BottomNavigation.Item label="Wallet" icon={GiWallet} />
      <BottomNavigation.Item label="Settings" icon={GiSettingsKnobs} />
      <BottomNavigation.Item label="Profile" icon={CgProfile} />
    </BottomNavigation>
  )
}

Example with Tooltip#

This example can be used to show a Tooltip on the hover on the menu items.

Edit on GitHub
"use client";

import { BottomNavigation } from "flowbite-react";

function Component() {
  return (
    <BottomNavigation>
      <BottomNavigation.Item label="Home" icon={AiFillHome} showTooltip />
      <BottomNavigation.Item label="Wallet" icon={GiWallet} showTooltip />
      <BottomNavigation.Item label="Settings" icon={GiSettingsKnobs} showTooltip />
      <BottomNavigation.Item label="Profile" icon={CgProfile} showTooltip />
    </BottomNavigation>
  )
}