Navigation

Breadcrumb — project and document

File-surface breadcrumb pairing project and user avatars with the open document and version badge.

simple3 in Navigation

BreadcrumbAvatarBadge

Demo

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

<Breadcrumb ariaLabel="Project breadcrumb">
  <span class="aui-breadcrumb__item">
    <a class="aui-breadcrumb__link" href="#">
      <Avatar name="Acme Design" size="xs" variant="primary" />
      Acme Design
    </a>
  </span>
  <span class="aui-breadcrumb__item">
    <a class="aui-breadcrumb__link" href="#">
      <Avatar name="Ada Lovelace" size="xs" status="online" />
      Ada Lovelace
    </a>
  </span>
  <span class="aui-breadcrumb__item">
    <span class="aui-breadcrumb__current" aria-current="page">
      homepage.fig
      <Badge variant="muted" size="sm">v4</Badge>
    </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.