mittwald Flow Logo

Components

Breadcrumb

Eine Breadcrumb ist ein Navigationselement, das Usern Orientierung bietet, indem es die aktuelle Position sowie die übergeordneten Navigationsebenen anzeigt.GitHub
  1. Projekte
  2. Apps
  3. Meine App

Playground

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

  1. Projekte
  2. Apps
  3. Meine App
import {
  Breadcrumb,
  Link,
} from "@mittwald/flow-react-components";

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

Color

Je nach Bedarf stehen drei Breadcrumb-Color zur Auswahl: Primary, Light und Dark. Primary ist die Standard-Color und muss nicht explizit im Code angegeben werden.

Light und Dark

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

  1. Projekte
  2. Apps
  3. Meine App
  1. Projekte
  2. Apps
  3. Meine App

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.

Overview