# Breadcrumb
Eine Breadcrumb zeigt die aktuelle Position sowie übergeordnete Navigationsebenen an.
```tsx
import {
Breadcrumb,
Link,
} from "@mittwald/flow-react-components";
Projekte
Apps
Meine App
```
---
# 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](/02-foundations/01-design/02-colors#light-und-dark-color).
```tsx
import {
Breadcrumb,
Link,
} from "@mittwald/flow-react-components";
Projekte
Apps
Meine App
```
```tsx
import {
Breadcrumb,
Link,
} from "@mittwald/flow-react-components";
Projekte
Apps
Meine App
```
---
# Properties
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `"default" \| "dark" \| "light" \| "dark-static" \| "light-static"` | `"default"` | The color of the breadcrumb. |
| `size` | `"s" \| "m"` | `"m"` | The size of the element. |
| `id` | `string` | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `translate` | `"yes" \| "no"` | - | - |
| `className` | `string` | `'react-aria-Breadcrumbs'` | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |
| `style` | `StyleOrFunction` | - | 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. |
| `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 `