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.

Breadcrumb items stay on one command row. When the available width is smaller than the path, the ordered list scrolls horizontally instead of wrapping separators onto another line. Collapse intermediate ancestors for persistently narrow surfaces.

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