Navigation

Breadcrumb

A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or web application.

Variants

With chevrons

Utilize the component class `breadcrumbs` to generate a breadcrumb component. By integrating a chevron icon within the `breadcrumbs-separator` component class, you can create breadcrumbs with chevrons as separators.

With slashes

Using `/` in the `breadcrumbs-separator` class creates breadcrumbs with chevron separators, while the `rtl:` Tailwind modifier ensures smooth RTL mode operation.

With icons

Add icons in `<a>` tag to create breadcrumbs with icons.

  1. Home
  3. Components
  5. Breadcrumb

Functionality

Multiple pages

Use the below given example to show breadcrumbs with multiple pages.

  1. Home
  5. Breadcrumb

With dropdown

Use dropdowns with breadcrumbs for versatile navigation.

  1. Home
  2. /
  4. /

With max-width

Apply the responsive utility class `max-w-xs` to the breadcrumb, enabling a fixed width that allows horizontal scrolling while occupying less space.

Illustrations

With background

Use the below given example for breadcrumb with background.

Bordered breadcrumb

Use the below given example for breadcrumb with border.

Class referenceThe component, style, color, state, size and modifier classes available for this component.
ClassTypeDescription
breadcrumbscomponentBase class for breadcrumb component.
breadcrumbs-separatorpartUsed to separate icons or text within breadcrumbs.