Breadcrumb
Shows where the current page sits in the hierarchy, with links back up to each level.Basic
Preview
Code
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Breadcrumb } from '@advui/core'
import Link from 'next/link'
<Breadcrumb>
<Breadcrumb.Item href="/">Home</Breadcrumb.Item>
<Breadcrumb.Item render={<Link href="/projects" />}>Projects</Breadcrumb.Item>
<Breadcrumb.Item href="/projects/atlas">Atlas</Breadcrumb.Item>
<Breadcrumb.Item>Settings</Breadcrumb.Item>
</Breadcrumb>Examples
Collapsed and custom separator
A deep path limited to three items, and slashes between items.Preview
Code
API reference
Breadcrumb
| Prop | Type | Default | Description |
|---|---|---|---|
maxItems | number | — | Show at most this many items: the first and the last ones stay, the rest collapse behind a “Show more” button. |
separator | ReactNode | chevron | Drawn between items and hidden from screen readers. |
aria-label | string | 'Breadcrumb' | Names the navigation landmark. |
Breadcrumb.Item
| Prop | Type | Default | Description |
|---|---|---|---|
children required | ReactNode | — | The page title. |
href | string | — | Link target. On iOS and Android a path goes to the router registered with `setRouter`, and an absolute URL opens with the system. |
render | ReactElement | — | Your router’s link on web, e.g. `<Link href="/projects" />`.Web only. |
onPress | () => void | — | Called when the item is pressed, before its `href` is followed. Without an `href`, navigate here, e.g. `router.push(…)` in Expo Router. |
current | boolean | last item | Marks the current page; it is shown as plain text, not a link. |
Accessibility
- A
navlandmark named “Breadcrumb” containing an ordered list, so screen readers announce the number of levels. - The current page has
aria-current="page"and is not a link. On iOS and Android its label ends with “current page”. - Separators are decorative and hidden from assistive technology.
- The collapse button is labelled with how many levels it reveals, e.g. “Show 4 more”.
| Key | Action |
|---|---|
| Tab | Moves between the links and the “Show more” button. |
| Enter | Follows the focused link. |
Responsive behavior
Items wrap to a new line when space runs out; long titles are cut to one line. Use maxItems for deep paths on phones.
Platform notes
Web
Items with
href render real <a> links; pass render for client-side routing.iOS
Items are links when they have
onPress, or an href they can follow: an absolute URL, or a path once a router is registered with setRouter (since 0.15.0).Android
Items are links when they have
onPress, or an href they can follow: an absolute URL, or a path once a router is registered with setRouter (since 0.15.0).