sdxc

Type to search, or start from one of these:

All guidesAll packages

Breadcrumbs

A trail of links marking the page's position within a hierarchy of parent sections, composing a <nav> root, an <ol> list.

View code
<Breadcrumbs aria-label="Breadcrumb">
	<Breadcrumbs.List>
		<Breadcrumbs.Item>
			<Breadcrumbs.Link href="/" mix={[hstack({ gap: 1, align: "center" })]}>
				<HouseIcon size={14} aria-hidden="true" />
				Workspace
			</Breadcrumbs.Link>
		</Breadcrumbs.Item>
		<Breadcrumbs.Item>
			<Breadcrumbs.Link href="/projects">Projects</Breadcrumbs.Link>
		</Breadcrumbs.Item>
		<Breadcrumbs.Item>
			<span mix={[text("sm"), fg("neutral.muted")]} aria-label="4 collapsed folders">
				…
			</span>
		</Breadcrumbs.Item>
		<Breadcrumbs.Item>
			<Breadcrumbs.Link href="/projects/acme-web/src/components">components</Breadcrumbs.Link>
		</Breadcrumbs.Item>
		<Breadcrumbs.Item>
			<Breadcrumbs.Link href="/projects/acme-web/src/components/button.tsx" aria-current="page">
				button.tsx
			</Breadcrumbs.Link>
		</Breadcrumbs.Item>
	</Breadcrumbs.List>
</Breadcrumbs>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui
import "@sdxc/ui/theme.css";

Usage

import { Breadcrumbs } from "@sdxc/ui";

Renders the trail's <nav> root, laying Breadcrumbs.List as a row. A root missing aria-label or aria-labelledby logs a dev-mode console.warn, since assistive technology needs one to identify this landmark.

Composition

The parts the component publishes, each a static property of the host.

  • Breadcrumbs
  • Breadcrumbs.ListRenders the trail's <ol> list, resetting native list markers and spacing and laying Breadcrumbs.Item children out as a wrapped row with a small gap between them.
  • Breadcrumbs.ItemRenders a single <li> wrapping one Breadcrumbs.Link.
  • Breadcrumbs.LinkRenders one trail segment as a restyled Link: sized to 0.875rem with its underline dropped, defaulting to a quiet neutral color role that brightens on hover and bolds when aria-current="page" is set.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Also accepts everything in TagProps<"nav">.

Breadcrumbs.List

Also accepts everything in TagProps<"ol">.

Breadcrumbs.Item

Also accepts everything in TagProps<"li">.