Diese Seite wurde von der Cloud Translation API übersetzt.

Breadcrumbs-Komponente erstellen

Eine grundlegende Übersicht dazu, wie Sie eine responsive und barrierefreie Navigationsstruktur für Ihre Website erstellen.

Adam Argyle

In diesem Beitrag möchte ich Ihnen zeigen, wie Sie Navigationspfade erstellen können. Demo ansehen.

Demo

Wenn du lieber ein Video ansiehst, findest du hier eine YouTube-Version dieses Beitrags:

Übersicht

Über die Komponente Navigationspfade wo sich der Nutzer in der Websitehierarchie befindet. Der Name stammt von Hänsel und Gretel, die in dunklem Wald und fanden den Weg nach Hause, indem Sie die Krümel rückwärts nachzeichnen.

Die Navigationspfade in diesem Post sind nicht Standard- Navigationspfade, dem Navigationspfad ähneln. Sie bieten zusätzliche Funktionen, da über ein <select> die Navigationsleiste direkt in die Navigationsleiste eingefügt wird, was einen mehrstufigen Zugriff ermöglicht.

Hintergrund: UX

Im Video für die Komponentendemo oben sind die Platzhalterkategorien die Genres Videospiele. Dieser Pfad wird wie unten dargestellt unter home » rpg » indie » on sale erstellt.

Mit dieser Breadcrumb-Komponente sollten Nutzer in der Lage sein, sich durch diese Informationshierarchie zu bewegen, Äste zu überspringen und Seiten schnell und präzise auszuwählen.

Informationsarchitektur

Ich finde es hilfreich, in Sammlungen und Elementen zu denken.

Sammlungen

Eine Sammlung besteht aus einer Reihe von Optionen, aus denen Sie wählen können. Auf der Startseite der Klickpfad-Prototyp dieses Beitrags, die Sammlungen sind FPS, RPG, Bawler, Dungeon-Crawler, Sport und Rätsel.

Elemente

Ein Videospiel ist ein Artikel. Eine bestimmte Sammlung kann auch ein Artikel sein, wenn sie eine andere Sammlung darstellt. „RPG“ ist beispielsweise ein Element und eine gültige Sammlung. Wenn es sich um ein Element handelt, befindet sich der Nutzer auf der Sammlungsseite. Beispiel: werden sie auf der Rollenspiel-Seite angezeigt. Dort findest du eine Liste mit Rollenspielen, zusätzliche Unterkategorien: AAA, Indie und Selbstveröffentlichung.

In der Informatik ist diese Breadcrumb-Komponente ein mehrdimensionales Array:

const rawBreadcrumbData = {
  "FPS": {...},
  "RPG": {
    "AAA": {...},
    "indie": {
      "new": {...},
      "on sale": {...},
      "under 5": {...},
    },
    "self published": {...},
  },
  "brawler": {...},
  "dungeon crawler": {...},
  "sports": {...},
  "puzzle": {...},
}

Ihre App oder Website hat eine benutzerdefinierte Informationsarchitektur (IA), die ein anderes mehrdimensionales Array erstellt. Ich hoffe aber, dass das Konzept der Landingpages für Sammlungen und die Hierarchieaufschlüsselung auch in Ihre Breadcrumbs einfließen kann.

Layouts

Markup

Gute Komponenten beginnen mit dem richtigen HTML-Code. In diesem Abschnitt geht es um Markup-Entscheidungen und deren Auswirkung auf die Gesamtkomponente.

Dunkles und helles Design

<meta name="color-scheme" content="dark light">

Das Meta-Tag color-scheme oben informiert den Browser darüber, dass für diese Seite der helle und der dunkle Browser Stile. Die Beispiel-Brotkörbe enthalten kein CSS für diese Farbschemata. Daher werden die Standardfarben des Browsers verwendet.

Navigationselement

<nav class="breadcrumbs" role="navigation"></nav>

Es empfiehlt sich, die Methode Element <nav> für die Website-Navigation. Diese hat die implizite ARIA-Rolle Navigation. Bei den Tests habe ich festgestellt, dass sich durch das role-Attribut die Interaktion eines Screenreaders mit dem Element geändert hat. Es wurde tatsächlich als Navigation angekündigt. Deshalb habe ich es hinzugefügt.

Symbole

Wenn sich ein Symbol auf einer Seite wiederholt, wird die SVG-Datei Element <use> bedeutet, dass Sie path einmal definieren und für alle Instanzen des . So wird verhindert, dass sich dieselben Pfadinformationen wiederholen, was zu größeren Dokumenten und möglicherweise zu Pfadinkonsistenzen führt.

Fügen Sie dazu der Seite ein ausgeblendetes SVG-Element hinzu und fügen Sie die Symbole in ein <symbol>-Element mit einer eindeutigen ID ein:

<svg style="display: none;">

  <symbol id="icon-home">
    <title>A home icon</title>
    <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
  </symbol>

  <symbol id="icon-dropdown-arrow">
    <title>A down arrow</title>
    <path d="M19 9l-7 7-7-7"/>
  </symbol>

</svg>

Der Browser liest die SVG-HTML-Daten, speichert die Symbolinformationen im Arbeitsspeicher und fährt mit dem Rest der Seite fort, wobei auf die ID für weitere Verwendungen des Symbols verwiesen wird, z. B. so:

<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <use href="#icon-home" />
</svg>

<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <use href="#icon-dropdown-arrow" />
</svg>

In den DevTools wird ein gerendertes SVG-Element angezeigt.

Einmal definieren, beliebig oft verwenden, mit minimalen Auswirkungen auf die Seitenleistung und flexiblem Styling. Beachten Sie, dass dem SVG-Element aria-hidden="true" hinzugefügt wurde. Die Symbole sind für Nutzer, die sich Inhalte nur anhören, nicht nützlich. Wenn sie ausgeblendet werden, können sie nicht als unnötiger Störfaktor dienen.

Split-Link `.crumb`

Hier weichen der herkömmliche Navigationspfad von denen in dieser Komponente ab. Normalerweise wäre das nur ein <a>-Link, aber ich habe die Durchlauf-UX mit einem getarnte Auswahl. Die Klasse .crumb ist für das Layout des Links und das Symbol, während .crumbicon für das Stapeln des Symbols zuständig ist und Elemente zusammen. Ich habe ihn als Split-Link bezeichnet, weil seine Funktionen denen einer Split-Schaltfläche ähneln, aber für die Seitennavigation.

<span class="crumb">
  <a href="#sub-collection-b">Category B</a>
  <span class="crumbicon">
    <svg>...</svg>
    <select class="disguised-select" title="Navigate to another category">
      <option>Category A</option>
      <option selected>Category B</option>
      <option>Category C</option>
    </select>
  </span>
</span>

Ein Link und einige Optionen sind nichts Besonderes, bieten aber mehr Funktionen Navigationspfad. Das Hinzufügen eines title zum <select>-Element ist für den Bildschirm hilfreich Nutzenden und ihnen Informationen zur Aktion der Schaltfläche geben. Trotzdem und allen anderen dieselbe Hilfe, wie Sie sehen, iPad. Ein Attribut stellt vielen Nutzenden den Schaltflächenkontext bereit.

Screenshot mit dem unsichtbaren select-Element, auf dem der Mauszeiger darauf bewegt wird,
wird eine kontextbezogene Kurzinfo angezeigt.

Separator-Dekorationen

<span class="crumb-separator" aria-hidden="true">→</span>

Trennzeichen sind optional. Es reicht auch aus, nur eines hinzuzufügen (siehe drittes Beispiel im Video). oben). Ich gebe dann jedem aria-hidden="true" einen, da sie dekorativ sind und nicht etwas, das ein Screenreader ansagen muss.

Mit der Eigenschaft gap, die im nächsten Abschnitt behandelt wird, lässt sich das Intervall ganz einfach festlegen.

Stile

Da für die Farbe Systemfarben verwendet werden, handelt es sich bei Stilen meistens um Lücken und Stapel.

Layoutrichtung und -fluss

In den DevTools wird die Ausrichtung des Navigationspfads mithilfe der Flexbox-Overlay-Funktion angezeigt.

Mit dem primären Navigationselement nav.breadcrumbs wird ein benutzerdefiniertes Attribut auf einen Umfang festgelegt die von Kindern verwendet werden kann. Außerdem wird eine horizontale Layout. So sorgen Sie dafür, dass die Breadcrumbs, Trennlinien und Symbole ausgerichtet sind.

.breadcrumbs {
  --nav-gap: 2ch;

  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  padding: calc(var(--nav-gap) / 2);
}

Ein Breadcrumb-Trail, der vertikal mit Flexbox-Overlays ausgerichtet ist.

Jedes .crumb legt auch ein horizontales, vertikal ausgerichtetes Layout mit etwas Abstand fest, richtet sich aber speziell auf seine Link-Untergeordneten aus und gibt den Stil white-space: nowrap an. Dies ist wichtig für Navigationspfade, die aus mehreren Wörtern bestehen. mehrzeilig verlaufen sollen. Später in diesem Post werden wir noch Stile hinzufügen, horizontaler Überlauf durch diese white-space-Eigenschaft.

.crumb {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--nav-gap) / 4);

  & > a {
    white-space: nowrap;

    &[aria-current="page"] {
      font-weight: bold;
    }
  }
}

aria-current="page" wird hinzugefügt, damit sich der Link zur aktuellen Seite von den anderen abhebt. Nutzer von Screenreadern erkennen nicht nur deutlich, dass der Link zur aktuellen Seite führt, sondern wir haben das Element auch visuell so gestaltet, dass sehende Nutzer eine ähnliche Nutzererfahrung haben.

Bei der Komponente .crumbicon wird ein SVG-Symbol mit einem „fast unsichtbaren“ <select>-Element über das Raster gestapelt.

Die Grid DevTools werden über einer Schaltfläche angezeigt, bei der sowohl die Zeile als auch die Spalte den Namen „stack“ haben.

.crumbicon {
  --crumbicon-size: 3ch;

  display: grid;
  grid: [stack] var(--crumbicon-size) / [stack] var(--crumbicon-size);
  place-items: center;

  & > * {
    grid-area: stack;
  }
}

Das <select>-Element steht im DOM an letzter Stelle, also befindet es sich auf dem Stack, und interaktiv. Fügen Sie den Stil opacity: .01 hinzu, damit das Element weiterhin verwendet werden kann. Das Ergebnis ist ein Auswahlfeld, das sich perfekt in die Form des Symbols einfügt. So können Sie das Aussehen eines <select>-Elements anpassen, während Wartung der integrierten Funktionalität.

.disguised-select {
  inline-size: 100%;
  block-size: 100%;
  opacity: .01;
  font-size: min(100%, 16px); /* Defaults to 16px; fixes iOS zoom */
}

Überlauf

Navigationspfade sollten einen sehr langen Weg darstellen. Ich liebe es, wenn es angebracht ist, horizontal aus dem Bild zu gehen. Breadcrumbs-Komponente gut qualifiziert.

.breadcrumbs {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: calc(var(--nav-gap) / 2);

  & > .crumb:last-of-type {
    scroll-snap-align: end;
  }

  @supports (-webkit-hyphens:none) { & {
    scroll-snap-type: none;
  }}
}

Mit den Überlaufstilen wird die folgende UX eingerichtet:

Horizontales Scrollen mit Overscroll-Begrenzung
Horizontaler Bildlauf-Abstand
Ein Snap-Punkt am letzten Stützpunkt. Das bedeutet, dass beim Laden der Seite der erste Breadcrumb an der richtigen Stelle und im Blickfeld geladen wird.
Der Anknüpfungspunkt wird aus Safari entfernt, da es Probleme mit der Kombination aus horizontalem Scrollen und dem Anknüpfungseffekt gab.

Medienabfragen

Eine subtile Anpassung für kleinere Ansichten besteht darin, das Label „Startseite“ auszublenden und nur das Symbol zu behalten:

@media (width <= 480px) {
  .breadcrumbs .home-label {
    display: none;
  }
}

Direkter Vergleich der Breadcrumbs mit und ohne Startseitenlabel

Bedienungshilfen

Bewegung

Diese Komponente enthält nicht viel Bewegung, aber indem wir den Übergang in eine prefers-reduced-motion-Prüfung einbetten, können wir unerwünschte Bewegungen verhindern.

@media (prefers-reduced-motion: no-preference) {
  .crumbicon {
    transition: box-shadow .2s ease;
  }
}

Keiner der anderen Stile muss geändert werden. Die Hover- und Fokuseffekte sind auch ohne transition gut und aussagekräftig. Wenn Bewegung in Ordnung ist, fügen wir der Interaktion einen subtilen Übergang hinzu.

JavaScript

Unabhängig vom Routertyp, den Sie an Ihrem Standort oder in Ihrer Anwendung verwenden, Wenn ein Nutzer den Navigationspfad ändert, muss die URL aktualisiert werden und der Nutzer ob die entsprechende Seite angezeigt wurde. Zweitens: Sorgen Sie dafür, dass Nutzer nicht unerwartet weitergeleitet werden, wenn sie sich nur die <select>-Optionen ansehen.

Zwei wichtige Messwerte für die Nutzererfahrung, die von JavaScript verarbeitet werden müssen: „select“ geändert und daran arbeiten, das Auslösen von <select> Änderungsereignissen zu verhindern.

Das Verhindern von eifrigem Ereignis ist aufgrund der Verwendung eines <select> erforderlich -Elements. Unter Windows Edge und wahrscheinlich auch in anderen Browsern wählen Sie changed wird ausgelöst, wenn der Nutzer die Optionen über die Tastatur durchblättert. Aus diesem Grund als „eager“ bezeichnet, da der Nutzer die Option nur per Pseudo oder Fokus hat, aber die Auswahl mit enter oder click noch nicht bestätigt wurde. Eifrig wird diese Funktion zum Ändern der Komponentenkategorie nicht zugänglich, Wenn Sie das Auswahlfeld öffnen und einfach nach einem Element suchen, wird das Ereignis ausgelöst und um die Seite zu ändern, bevor die Nutzenden bereit sind.

Verbessertes Ereignis „`<select>` geändert“

const crumbs = document.querySelectorAll('.breadcrumbs select')
const allowedKeys = new Set(['Tab', 'Enter', ' '])
const preventedKeys = new Set(['ArrowUp', 'ArrowDown'])

// watch crumbs for changes,
// ensures it's a full value change, not a user exploring options via keyboard
crumbs.forEach(nav => {
  let ignoreChange = false

  nav.addEventListener('change', e => {
    if (ignoreChange) return
    // it's actually changed!
  })

  nav.addEventListener('keydown', ({ key }) => {
    if (preventedKeys.has(key))
      ignoreChange = true
    else if (allowedKeys.has(key))
      ignoreChange = false
  })
})

Dazu wird bei jedem <select>-Element auf ein Tasten-Nieder-Ereignis geachtet und ermittelt, ob die gedrückte Taste eine Navigationsbestätigung (Tab oder Enter) oder eine räumliche Navigation (ArrowUp oder ArrowDown) war. Anhand dieser Bestimmung kann die Komponente entscheiden, ob sie warten oder fortfahren soll, wenn das Ereignis für das <select>-Element ausgelöst wird.

Fazit

Jetzt, wo du weißt, wie ich das gemacht habe, wie würdest du... ‽ 🙂

Lassen Sie uns unsere Herangehensweisen diversifizieren und alle Möglichkeiten kennenlernen, wie wir das Web entwickeln können. Erstelle eine Demo, twittere mir Links und ich füge sie hinzu im Abschnitt „Community-Remixe“ weiter unten.

Remixe der Community

Tux Solbakk als Webkomponente: Demo und Code