Navigation

Breadcrumb — with avatars

Navigation trail where every segment is represented by an avatar.

simple3 in Navigation

BreadcrumbAvatar

Demo

---
import { Breadcrumb, Avatar } from "astro-ui";
---

<Breadcrumb separator="chevron" ariaLabel="Team breadcrumb">
  <span class="aui-breadcrumb__item">
    <a class="aui-breadcrumb__link" href="#">
      <Avatar name="Acme Design" size="xs" />
      Acme Design
    </a>
  </span>
  <span class="aui-breadcrumb__item">
    <a class="aui-breadcrumb__link" href="#">
      <Avatar name="Ada Lovelace" size="xs" />
      Ada Lovelace
    </a>
  </span>
  <span class="aui-breadcrumb__item">
    <span class="aui-breadcrumb__current" aria-current="page">
      <Avatar name="Grace Hopper" size="xs" status="online" />
      Grace Hopper
    </span>
  </span>
</Breadcrumb>

Zero new CSS — every element reads the library tokens. Switch to the Code tab and hit Copy for paste-ready source; form ids here are prefixed per instance so multiple copies can coexist on one page.