Breadcrumb
Show where a page sits in a hierarchy.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- Showing where a page sits in a hierarchy, such as Workspace, Settings, Billing.
- Client-side paths like a file browser, where crumbs call onClick instead of navigating.
- Paths that grow as people drill in, where new crumbs should slide in.
- Use tree-view when people need to browse the whole hierarchy.
- Use tabs for switching between sibling views.
- Use pagination for moving through pages of a list.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { Breadcrumb } from 'animui/breadcrumb';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { Breadcrumb } from "animui/breadcrumb"; export function SettingsPath() { return ( <Breadcrumb items={[ { label: "Workspace", href: "/" }, { label: "Settings", href: "/settings" }, { label: "Billing" }, ]} /> );}Breadcrumb
A path of links where the last item is the current page. Crumbs added later slide in.
PropTypeDefaultDescription
itemsRequired{ label: string; href?: string; onClick?: (event: MouseEvent<HTMLElement>) => void }[]–Path from root to current page. Items with href render a plain a, or the link component set with ArcProvider (such as next/link or a locale-aware Link); items with only onClick render buttons.ariaLabelstring"Breadcrumb"Label for the nav landmark.- Tab
- Moves between crumb links and buttons.
- Enter
- Follows the focused crumb.
- Renders a nav landmark with an ordered list.
- The last item is a span with aria-current="page" and is never a link.
- Chevron separators are aria-hidden.
- Crumbs present on first render stay still; new crumbs slide in 8px from the left out of a blur while siblings shift on a smooth spring.
- Reduced motion adds and removes crumbs without movement.
- The list wraps onto new lines on narrow screens; individual crumbs never wrap internally.
- It does not truncate or collapse long paths, so keep labels short or shorten the path on mobile yourself.
- Crumbs use layout position animation only when the path changes; static paths do not animate.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for hierarchical page location. For client-side paths such as a file browser, pass onClick without href.
- Links are plain anchors by default. For client-side navigation, wrap the app once in ArcProvider from animui/lib with your router's Link: <ArcProvider link={Link}>.
- Keep labels short; the component does not truncate or collapse long paths.
The full library index for assistants is at /llms.txt.