Breadcrumb

Breadcrumb in Storybook

Verwendung

Überblick

Die Breadcrumb-Navigation ist eine sekundäre Navigationskomponente, über die Benutzer ihre aktuelle Position identifizieren und zu einer übergeordneten Ebene oder einem vorherigen Schritt wechseln können. Sie besteht aus Textlinks. Jeder Link stellt dabei eine Seite dar, die eine Ebene höher liegt und auf die Benutzer schnell zugreifen können.

Breadcrumbs sind ein wichtiges Navigationselement zur Orientierung: Sie zeigen Benutzern ihre aktuelle Position in der hierarchischen Struktur einer Anwendung.

Zu verwenden

• Bei Produkten und Benutzeroberflächen mit Hierarchien, die mehr als zwei Ebenen umfassen.
• Wenn Benutzer wissen sollen, wo in der Informationshierarchie einer Anwendung sie sich befinden.
• Wenn der Benutzer sehr wahrscheinlich über eine externe Quelle auf die Seite gelangt ist.

Nicht zu verwenden

• Als primäre Art der Navigation in einer Anwendung oder auf einer Website.
• Bei Produkten mit Navigation auf einer Ebene.
• Zur Unterstützung der Benutzer beim Nachverfolgen des Fortschritts in einem Prozess mit mehreren Schritten. Verwenden Sie stattdessen eine der Fortschrittsanzeigen.

Formatierung

Aufbau

Die Breadcrumb-Komponente besteht aus den folgenden Elementen:

1. Textlink: Breadcrumbs werden als blaue Live-Textlinks angezeigt, wie Hyperlinks. Sie leiten Benutzer zur jeweils übergeordneten Seite.
2. Trennzeichen für Textlinks: Das Trennzeichen kennzeichnet die Trennung zwischen den Seiten. Es hat die gleiche Schriftart wie die Textlinks. Trennzeichen sind nicht interaktiv.
3. Aktuelles Element: Das Breadcrumb-Element für die Seite, die der Benutzer aktuell anzeigt. Wird als einfacher Text angezeigt.

Platzierung

Positionieren Sie die Breadcrumbs oben links auf der Seite.

Best Practices

• Alle Elemente im Breadcrumb-Pfad (außer der aktuellen Seite) müssen ein Ziel darstellen, zu dem der Benutzer wechseln kann. Wenn eine logische Kategorie keine zugehörige Seite aufweist, fügen Sie sie nicht in den Breadcrumb-Pfad ein.
• Breadcrumb-Pfade beginnen normalerweise bei der Startseite. Wenn die globale Navigation jedoch einen Link zur Startseite enthält, sollte der Startseiten-Link nicht in den Breadcrumb-Pfad integriert werden.
• Breadcrumbs sollen die hierarchische Struktur einer Website aufzeigen und nicht den Verlauf der aufgerufenen Seiten.
• Stellen Sie sicher, dass alle Elemente im Breadcrumb-Pfad, mit Ausnahme der aktuellen Seite, aktive Links sind.
• Breadcrumbs dürfen auf Mobilgeräten nicht in mehrere Zeilen umbrochen werden. Sie können den Breadcrumb-Pfad so kürzen, dass er nur die letzten Ebenen enthält.

Quelle: Nielsen Norman Group

Inhalt

Allgemeine Richtlinien fürs Schreiben

• Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
• Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
• Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
• Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
• Halten Sie Wörter und Sätze kurz.

Seitenlinks

• Die Wörter in Breadcrumb-Textlinks sollten nicht vage, sondern genau, spezifisch und eindeutig sein.
• Benutzer sollten keine Überraschung erleben, wenn sie auf einen Textlink klicken oder tippen.
• In Breadcrumb-Beschriftungen wird idealerweise die übliche Groß- und Kleinschreibung verwendet, wenn dies auch bei den verknüpften Seiten der Fall ist.

Verwenden Sie genaue und spezifische Beschriftungen.

Verwenden Sie keine vagen oder mehrdeutigen Beschriftungen.

Verhalten

• Bei nur einem anzuzeigenden Element wird die Breadcrumb-Navigation nicht gerendert. Das bedeutet, dass sich der Benutzer auf der obersten Ebene einer Navigationsstruktur befindet.
• Bei nur zwei anzuzeigenden Elementen wird eine Zurück-Schaltfläche gerendert.
• Bei mehr als zwei anzuzeigenden Elementen wird die normale Breadcrumb-Navigation gerendert.

Zustände

Breadcrumbs haben die gleichen interaktiven Zustände wie die Link-Komponente.

Interaktionen

Tastatur

Die Navigation zu den Links erfolgt über die TAB-TASTE. Ein Link lässt sich über die EINGABETASTE aktivieren.

Screenreader

Die ARIA-Rolle „navigation“ und aria-label='breadcrumb' sind enthalten und bieten Benutzern von Screenreadern mehr Kontext. Ähnlich verhält es sich, wenn das Kontrollkästchen „lastItemClickable“ aktiviert ist. Der letzte Link im Breadcrumb-Pfad erhält den Wert aria-current="page" zur Identifizierung der letzten Seite.

Barrierefreiheit

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

• Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
• Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
• Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
• Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.

Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.

Beachten Sie die folgenden Hinweise und auch WAI-ARIA Authoring Practices for Breadcrumbs. Dazu gehören folgende Aspekte:

• Der Breadcrumb-Pfad muss auf jeder Seite an der gleichen Stelle angezeigt werden.
• Der Linktext muss klar und verständlich sein.

Code

<Breadcrumb
  links={[
    {
      href: 'grandparent-url',
      text: 'Grandparent Page',
    },
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>

Importanweisung

import { Breadcrumb } from '@jutro/router';

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

backLinkWithoutText

Typ

boolean

Beschreibung

If set to true, the back link renders as just an "arrow" icon. If set to false, it also includes the word "Back". The showTwoBreadcrumbs property takes precedence over this property.

className

Typ

string

Beschreibung

CSS class name for this component.

lastItemClickable

Typ

boolean

Beschreibung

If set to true, the last item in the breadcrumb is also a link.

links

Typ

({text: IntlMessageShape, href: IntlMessageShape} & Link)[]

className

Typ

string

Beschreibung

CSS class name for this component.

href

Typ

IntlMessageShape

Beschreibung

URL or path for the link.

Link

Typ

Link

Beschreibung

Additional properties from the Link component.

Beschreibung

Takes an array of objects, one per each link to be displayed.

renderLinkTrigger

Typ

Link

Beschreibung

RenderProp function to generate each individual link that makes up the breadcrumbs. Uses the properties from the Link component.

showTwoBreadcrumbs

Typ

boolean

Beschreibung

If set to true, breadcrumbs for both the parent and the current page are displayed if there are only two breadcrumbs. If set to false, the back link renders as an arrow with or without text depending on backLinkWithoutText.

Hooks

Für breadcrumb sind keine Hooks verfügbar.

Übersetzungsschlüssel

Es gibt keine Übersetzungen für breadcrumb.

Informationen über die Verwaltung von Übersetzungen finden Sie in unserem Abschnitt über Internationalisierung.

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Beispiele

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design eines Breadcrumb und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Einfaches Beispiel

Fügen Sie eine sekundäre Navigationskomponente hinzu, um für den Benutzer seine aktuelle Position in Bezug auf übergeordnete Ebenen anzuzeigen.

<Breadcrumb
  links={[
    {
      href: 'grandparent-url',
      text: 'Grandparent Page',
    },
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>

Beispiel für klickbares letztes Element

Standardmäßig ist das letzte Element kein klickbarer Link. Sie können dies jedoch mit der Eigenschaft lastItemClickable ändern.

<Breadcrumb
  lastItemClickable={true}
  links={[
    {
      href: 'grandparent-url',
      text: 'Grandparent Page',
    },
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      href: 'current-url',
      text: 'Current Page',
    },
  ]}
/>

Beispiel für einen Rückverweis (Backlink)

Wenn es nur ein übergeordnetes Element gibt, wird die Komponente als Link mit dem Text „Zurück“ und einem nach links weisenden Pfeil gerendert. Die Eigenschaft showTwoBreadcrumbs hat Vorrang vor dieser Eigenschaft.

<Breadcrumb
  links={[
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>

Beispiel für einen Rückverweis ohne Text

Wenn es nur ein übergeordnetes Element gibt und die backLinkWithoutText-Eigenschaft true ist, wird die Komponente nur als nach links weisender Pfeil gerendert. Die Eigenschaft showTwoBreadcrumbs hat Vorrang vor dieser Eigenschaft.

<Breadcrumb
  backLinkWithoutText={true}
  links={[
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>

Beispiel für die Anzeige von zwei Breadcrumbs

Wenn es genau zwei Breadcrumb-Elemente gibt und showTwoBreadcrumbs auf true festgelegt ist, rendert die Komponente sowohl die übergeordnete als auch die aktuelle Seite als klickbare Breadcrumbs. Wenn showTwoBreadcrumbs auf false festgelegt ist, wird ein Backlink als Pfeil mit oder ohne Text gerendert, je nach Konfiguration von backLinkWithoutText.

<Breadcrumb
  showTwoBreadcrumbs={true}
  links={[
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      href: 'current-url',
      text: 'Current Page',
    },
  ]}
/>

Änderungsprotokoll

10.12.0

Die Eigenschaft showTwoBreadcrumbs wurde hinzugefügt, um die Anzeige beider Breadcrumb-Links zu ermöglichen, wenn nur zwei Breadcrumb-Links vorhanden sind: die aktuelle Seite und die Startseite. Bisher wurde immer ein Zurück-Pfeil (mit oder ohne Text) angezeigt.

10.9.0

• Es wurde eine neue Opt-in-Funktion eingeführt, die die automatische Ereignisveröffentlichung für die Komponente Breadcrumb deaktiviert. Sie können diese Funktion aktivieren, indem Sie der .env-Datei im Stammverzeichnis Ihrer Jutro-Anwendung JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true hinzufügen. Wenn diese Option aktiviert ist, veröffentlichen ältere Komponenten standardmäßig keine Ereignisse mehr. Weitere Informationen zu Ereignissen und zum Einrichten neuer Ereignisse finden Sie in der Dokumentation zu Ereignissen.

10.4.0

• Unterstützung für Design-Token wurde hinzugefügt.