Breadcrumb

Eine Breadcrumb zeigt die aktuelle Position sowie übergeordnete Navigationsebenen an.

import {
  Breadcrumb,
  Link,
} from "@mittwald/flow-react-components";

<Breadcrumb>
  <Link href="#">Projekte</Link>
  <Link href="#">Apps</Link>
  <Link href="#">Meine App</Link>
</Breadcrumb>

Best Practices

Wähle einen sinnvollen Startpunkt. Im mStudio bezieht sich die Breadcrumb zum Beispiel auf die Navigation innerhalb eines Projekts.
Bilde die Navigationshierarchie exakt ab. Ein Beispiel ist „Projekt > Apps > App“.
Halte die Zahl der Ebenen überschaubar. Ab etwa fünf Ebenen verlieren User die Übersicht.
Verwende generische Bezeichnungen wie „App“ statt konkreter Namen. Dynamische Namen verlängern die Breadcrumb unnötig, generische Begriffe halten die Navigation stabil und lesbar.

Color

Zusätzlich zur Standard-Color kann die Breadcrumb in Light und Dark dargestellt werden, um auf farbigen oder dekorativen Hintergründen ausreichend Kontrast zu erreichen. Mehr zur richtigen Verwendung von Light und Dark findest du in den Foundations unter Color‍.

Properties

Property	Type	Default	Description
`children`	`ReactNode`	-
`className`	`string`	'react-aria-Breadcrumbs'	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
`color`	`"default" \| "dark" \| "light" \| "dark-static" \| "light-static"`	"default"	The color of the breadcrumb.
`dependencies`	`readonly any[]`	-	Values that should invalidate the item cache when using dynamic collections.
`dir`	`string`	-
`hidden`	`boolean`	-
`id`	`string`	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`inert`	`boolean`	-
`isDisabled`	`boolean`	-	Whether the breadcrumbs are disabled.
`items`	`Iterable<object>`	-	Item objects in the collection.
`lang`	`string`	-
`render`	`DOMRenderFunction<"div", TooltipRenderProps>`	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
`size`	`"s" \| "m"`	"m"	The size of the element.
`slot`	`string`	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
`style`	`StyleOrFunction<TooltipRenderProps>`	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
`translate`	`"yes" \| "no"`	-

Events

Property	Type	Default	Description
`onAction`	`((key: Key) => void)`	-	Handler that is called when a breadcrumb is clicked.
`onClick`	`MouseEventHandler<HTMLDivElement>`	-

Accessibility

Property	Type	Default	Description
`aria-describedby`	`string`	-	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-label`	`string`	-	Defines a string value that labels the current element.
`aria-labelledby`	`string`	-	Identifies the element (or elements) that labels the current element.

Components

Integrations