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';

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>
  )
}

References