Blocks · Navigation

Navigation 3

Wayfinding segments: breadcrumbs with project context, avatars, and icons.

Breadcrumb — project and document

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

---
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>

Breadcrumb — with avatars

Navigation trail where every segment is represented by an avatar.

Breadcrumb Avatar

---
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>

Breadcrumb — with icons

File-browser breadcrumb with an icon on every segment, wrapped in a card.

Card Breadcrumb

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

const home = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg>';
const folder = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>';
const file = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M15 2v5h5"/></svg>';
---

<Card size="sm">
  <Breadcrumb
    separator="chevron"
    items={[
      { href: "#", label: "Home", icon: home },
      { href: "#", label: "Library", icon: folder },
      { label: "Breadcrumb", icon: file },
    ]}
  />
</Card>