Breadcrumb — Astralis UI

A hierarchy trail with automatic separators and current-page semantics.

"use client";

import { Breadcrumb } from "astralis-ui";

export function BreadcrumbDemo() {
  return (
    <Breadcrumb>
      <Breadcrumb.Item>
        <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        <Breadcrumb.Link href="#">Components</Breadcrumb.Link>
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        <Breadcrumb.Link isCurrent>Breadcrumb</Breadcrumb.Link>
      </Breadcrumb.Item>
    </Breadcrumb>
  );
}

Import#

import { Breadcrumb } from "astralis-ui";

Separators are inserted automatically between items — you never render them by hand, so they can't drift out of sync.

Custom separator#

"use client";

import { Breadcrumb, Text } from "astralis-ui";

export function BreadcrumbSeparator() {
  return (
    <Breadcrumb separator={<Text size="sm" color="subtle">/</Text>}>
      <Breadcrumb.Item>
        <Breadcrumb.Link href="#">astralis</Breadcrumb.Link>
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        <Breadcrumb.Link href="#">packages</Breadcrumb.Link>
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        <Breadcrumb.Link isCurrent>astralis-ui</Breadcrumb.Link>
      </Breadcrumb.Item>
    </Breadcrumb>
  );
}

Props#

Prop	Type	Default	Description
`separator`	`ReactNode`	chevron	Glyph between items (rendered `aria-hidden`).

Parts#

Part	Renders	Notes
`Breadcrumb.Item`	`li`	One trail entry.
`Breadcrumb.Link`	`a` (or `as={Link}`)	`isCurrent` renders a non-interactive `<span aria-current="page">`. Pass your router's Link via `as`.

Accessibility#

The root is <nav aria-label="Breadcrumb"> with an ordered list inside — the APG breadcrumb pattern.
The current page is marked with aria-current="page" and rendered non-interactive; separators are aria-hidden.