Komponenten

Breadcrumbs

Breadcrumbs dienen zur Orientierung bei der Nutzung digitaler Anwendungen. Sie zeigen dem Nutzer, auf welcher Ebene er sich befindet und ermöglichen jederzeit die Navigation zurück zum vorhergehenden Schritt. In diesem Guide erfahren Sie, wie Sie Breadcrumbs in verschiedenen Anwendungen einsetzen.

Breadcrumbs
  • Anwendung
  • Beispiele
  • Verwandte Komponente
  • Download

Anwendung

Aufbau

Breadcrumbs haben eine einfache Struktur von links nach rechts. Weiter links stehende Elemente sind in der hierarchischen Ordnung höher eingestuft. Die verschiedenen Ebenen werden durch ein Arrow-Icon getrennt.

Overflow

Falls Bezeichnungen zu lang für die Breadcrumb-Navigationszeile sind, wird zusätzlicher Platz benötigt. Verwenden Sie Auslassungszeichen, um längere Textelemente verkürzt darzustellen. Wenn der Mauszeiger über dem Auslassungszeichen steht oder dieses mit dem Finger angetippt wird (bei Touchscreen-Displays), erscheint ein Popover mit den versteckten Navigationselementen. Durch Klicken oder Tippen können diese aufgerufen werden. Alternativ können Sie festlegen, dass Nutzer jeweils nur einen Schritt zurückgehen können. Diese Option ist ausschließlich für Header vorgesehen.

Beispiele

Verwandte Komponente

Download

Wenn Sie ein Dokument herunterladen, akzeptieren Sie unsere Nutzungsbedingungen.

Sketch UI Library