# Breadcrumb

Eine Breadcrumb ist ein Navigationselement, das Usern Orientierung bietet, indem es die aktuelle Position sowie die übergeordneten Navigationsebenen anzeigt.

## Overview

# Playground

Verwende `<Breadcrumb />`, um eine Breadcrumb darzustellen. Die einzelnen
Navigationselemente werden dabei mit `<Link />` innerhalb der Component
erstellt.

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

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

---

# Color

Light und Dark sind Alternativen zur Standard-Color, falls diese auf farbigen
oder dekorativen Hintergründen keinen ausreichenden Kontrast bietet.

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

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

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

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

**Light:** Verwende die Light-Color, bei dunklen Hintergründen mit einem HSL
Lightness-Wert von weniger als 50.

**Dark:** Verwende die Dark-Color, bei hellen, farbigen Hintergründen mit einem
HSL Lightness-Wert von größer als 50.