React Breadcrumb - Flowbite

Get started with the breadcrumb component to show the current page location based on the URL structure using React and Tailwind CSS

The breadcrumb component can be used to indicate the current page's location within a navigational hierarchy and you can choose from multiple examples, colors, and sizes built with React and based on the utility classes from Tailwind CSS.

To start using the breadcrumb component you need to import it from flowbite-react:

'use client';

import { Breadcrumb } from 'flowbite-react';

Table of Contents#

Default breadcrumb#

Use the <Breadcrumb> component and the child <Breadcrumb.Item> components to create and indicate a series of page structure and URLs to help the user navigate through the website.

You can use the href prop from React to make the breadcrumb items clickable and the icon prop to add an icon to the breadcrumb item such as for the homepage.

Edit on GitHub
  • React TypeScript
'use client';

import { Breadcrumb } from 'flowbite-react';
import { HiHome } from 'react-icons/hi';

export default function DefaultBreadcrumb() {
  return (
    <Breadcrumb aria-label="Default breadcrumb example">
      <Breadcrumb.Item
        href="#"
        icon={HiHome}
      >
        <p>
          Home
        </p>
      </Breadcrumb.Item>
      <Breadcrumb.Item href="#">
        Projects
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        Flowbite React
      </Breadcrumb.Item>
    </Breadcrumb>
  )
}


Background color#

You can add a solid background style to the breadcrumb component by adding the bg-gray-50 class to the component from Tailwind CSS.

Edit on GitHub
  • React TypeScript
'use client';

import { Breadcrumb } from 'flowbite-react';
import { HiHome } from 'react-icons/hi';

export default function SolidBackground() {
  return (
    <Breadcrumb
      aria-label="Solid background breadcrumb example"
      className="bg-gray-50 px-5 py-3 dark:bg-gray-900"
    >
      <Breadcrumb.Item
        href="#"
        icon={HiHome}
      >
        <p>
          Home
        </p>
      </Breadcrumb.Item>
      <Breadcrumb.Item href="#">
        Projects
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        Flowbite React
      </Breadcrumb.Item>
    </Breadcrumb>
  )
}


Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "root": {
    "base": "",
    "list": "flex items-center"
  },
  "item": {
    "base": "group flex items-center",
    "chevron": "mx-1 h-4 w-4 text-gray-400 group-first:hidden md:mx-2",
    "href": {
      "off": "flex items-center text-sm font-medium text-gray-500 dark:text-gray-400",
      "on": "flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
    },
    "icon": "mr-2 h-4 w-4"
  }
}

References#