navigations

Tailwind CSS Breadcrumb

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

Class Name
Type
Description
breadcrumbsComponentBase class for breadcrumb component.
breadcrumbs-separatorComponentUsed to separate icons or text within breadcrumbs.

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.

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

For more information, check out the TailwindCSS RTL support documentation.

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

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

Use dropdowns with breadcrumbs for versatile navigation.

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

Use the below given example for breadcrumb with background.

Use the below given example for breadcrumb with border.