For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.1.0/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.1.0/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.1.0/en/components/breadcrumb.md.
A3S UI
  • English
  • v0.1.0

      • Breadcrumb

      Live preview

      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.

      Examples

      Basic

      Live preview

      Custom separator

      Live preview
      Live preview

      Collapsed

      Live preview

      RTL

      Live preview