Breadcrumb

Usage

Include CSS

Import Tailwind and one full A3S UI style bundle.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Or import only the base CSS, Breadcrumb component CSS, and one style pack.

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/breadcrumb.css";
@import "@a3s-lab/ui/styles/a3s.css";

Using CDN or bundler imports? See the Installation page.

Add your breadcrumb HTML

Use a navigation landmark with an ordered list. Mark the current page with aria-current="page".

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li aria-hidden="true"><svg data-rtl-flip class="lucide lucide-chevron-right" ...></svg></li>
    <li><span aria-current="page">Breadcrumb</span></li>
  </ol>
</nav>

HTML structure

nav.breadcrumb is the root landmark and should include aria-label="Breadcrumb".
ol contains the breadcrumb items in hierarchy order.
li > a represents navigable ancestors.
li[aria-hidden="true"] represents a visual separator.
[aria-current="page"] represents the current page.
li > span[aria-hidden="true"] represents a collapsed ellipsis.

Usage

Include CSS

Add your breadcrumb HTML

HTML structure

Examples

Basic

Custom separator

Collapsed

RTL

#Breadcrumb

#Usage

Include CSS

Add your breadcrumb HTML

#HTML structure

#Examples

#Basic

#Custom separator

#Dropdown

#Collapsed

#RTL

Usage

HTML structure

Examples

Basic

Custom separator

Dropdown

Collapsed

RTL