FORMA Docs

Breadcrumb

Show where a page sits in a hierarchy.

import { Breadcrumb } from "@/forma/arc/breadcrumb/breadcrumb";
Base

In FORMA

  • Liegt in kit/arc/breadcrumb und ist über @/forma/arc/breadcrumb/breadcrumb erreichbar.
  • Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

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

When not to use

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

Usage

import { Breadcrumb } from "@/forma/arc/breadcrumb/breadcrumb";

export function SettingsPath() {
  return (
    <Breadcrumb
      items={[
        { label: "Workspace", href: "/" },
        { label: "Settings", href: "/settings" },
        { label: "Billing" },
      ]}
    />
  );
}

API reference

Breadcrumb

A path of links where the last item is the current page. Crumbs added later slide in.

PropTypeDefaultDescription
items (required){ 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.

Keyboard interactions

KeysAction
TabMoves between crumb links and buttons.
EnterFollows the focused crumb.

Accessibility

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

Motion

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

Responsive behavior

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

Performance

  • Crumbs use layout position animation only when the path changes; static paths do not animate.

Notes for AI

  • 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 @/forma/arc/lib/arc-provider with your router's Link: <ArcProvider link={Link}>.
  • Keep labels short; the component does not truncate or collapse long paths.

Also in navigation

  • Mega menu morph: A site header whose menus share one floating panel. Moving between sections morphs its size, slides the next menu in from that side and glides the caret under the new trigger, with hover intent, a safe triangle and an accordion sheet on narrow screens.

Guidance for AI tools

Breadcrumb: Show where a page sits in a hierarchy. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückExpandable cardWeiterAlert

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.