navigations
Tailwind CSS
Breadcrumb A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or web application.
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.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
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.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
Add icons in <a>
tag to create breadcrumbs with icons.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
Use the below given example to show breadcrumbs with multiple pages.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
Use dropdowns with breadcrumbs for versatile navigation.
To learn more about dropdowns, refer to the
Dropdown
documentation.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
Home /
Components
/
Component
Apply the responsive utility class max-w-xs
to the breadcrumb, enabling a fixed width that allows horizontal scrolling while occupying less space.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
Use the below given example for breadcrumb with background.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
Use the below given example for breadcrumb with border.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">