Breadcrumbs-Komponente erstellen

Ein grundlegender Überblick über die Erstellung einer responsiven und zugänglichen Navigationspfadkomponente, mit der Nutzer auf Ihrer Website navigieren können.

Adam Argyle

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

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Demo

Falls Sie Videos bevorzugen, finden Sie 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, indem sie Seiten direkt in die Navigation mit <select>, wodurch ein mehrstufiger Zugriff möglich.

Hintergrund: UX

Im Video für die Komponentendemo oben sind die Platzhalterkategorien die Genres Videospiele. Dieser Weg wird wie unten gezeigt über den folgenden Pfad erstellt: home » rpg » indie » on sale.

Diese Navigationspfadkomponente sollte es Nutzern ermöglichen, sich Informationshierarchie; Zweige springen und schnell Seiten auswählen Genauigkeit.

Informationsarchitektur

Ich finde es hilfreich, in Bezug auf Sammlungen und Objekte 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 Gegenstand. Eine bestimmte Sammlung könnte auch ein Gegenstand sein, steht für eine andere Sammlung. Rollenspiele sind z. B. ein Gegenstand und . Wenn es sich um ein Element handelt, befindet sich der Nutzer auf dieser Sammlungsseite. Beispiel: sie sich auf der Rollenspiel-Seite befinden. Dort findest du eine Liste mit Rollenspielen, zusätzliche Unterkategorien: AAA, Indie und Selbstveröffentlichung.

In der Informatik stellt diese Breadcrumbs-Komponente multidimensional Array:

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

Ihre App oder Website verfügt über eine benutzerdefinierte Informationsarchitektur (IA), multidimensionalen Array aus. Ich hoffe, dass das Konzept der Seiten und der Hierarchiedurchlauf können auch in Ihren Navigationspfaden verwendet werden.

Layouts

Markup

Gute Komponenten beginnen mit geeignetem HTML. 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-Navigationspfade enthalten kein CSS für diese Farbschemata, Daher verwenden die Navigationspfade die vom Browser bereitgestellten Standardfarben.

<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. Beim Testen habe ich festgestellt, dass sich durch das Attribut role die Art und Weise geändert hat, dass der Screenreader mit dem Element interagiert, also habe ich mich dafür entschieden, es hinzuzufügen.

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 . Dadurch wird verhindert, dass dieselben Pfadinformationen wiederholt werden, größere Dokumente und das Potenzial von Pfadinkonsistenzen.

Um diese Technik zu verwenden, fügen Sie der Seite ein ausgeblendetes SVG-Element hinzu und umschließen Sie die Symbole. in einem <symbol>-Element mit einer eindeutigen ID:

<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, speichert die Symbolinformationen und speichert den Speicher wird mit dem Rest der Seite fortgesetzt und verweist auf die ID für weitere Verwendungen von auf das Symbol:

<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>

Entwicklertools mit einem gerenderten SVG-Use-Element.

Definieren Sie die Strategie einmalig und verwenden Sie sie beliebig oft mit minimaler Auswirkung auf die Seitenleistung. und flexible Gestaltung. Beachten Sie, dass dem SVG-Element aria-hidden="true" hinzugefügt wurde. Die Symbole sind für eine Person beim Surfen nicht hilfreich, weil sie nur den Inhalt hören können. von diesen Nutzenden verhindert, dass sie unnötigen Lärm hinzufügen.

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 nenne es Split-Link, weil seine Funktionen ähnlich wie die Teilen-Schaltfläche. sondern 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). Dann gebe ich jeweils aria-hidden="true", da sie dekorativ sind und nicht die ein Screenreader vorlesen muss.

Die Eigenschaft gap, die im Folgenden beschrieben wird, vereinfacht die Abstände dieser Elemente.

Stile

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

Layoutrichtung und -fluss

Entwicklertools, die die Ausrichtung des Navigationspfads mit dem zugehörigen Flexbox-Overlay zeigen .

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. Dadurch wird sichergestellt, dass die Brüche, Trennlinien und Symbole aufeinander ausgerichtet sind.

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

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

Ein Navigationspfad, der vertikal mit Flexbox-Overlays ausgerichtet ist.

Jede .crumb erzeugt auch ein horizontales vertikal ausgerichtetes Layout mit einigen Gap, richtet sich aber speziell auf ihre untergeordneten Link-Elemente aus und gibt den Stil an, white-space: nowrap. 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 aktuelle Seitenlink von der Ruhe. Nutzer von Screenreadern sehen nicht nur klar, dass der Link haben wir das Element visuell gestaltet, um sehenden Nutzern eine ähnliche User Experience.

In der Komponente „.crumbicon“ wird ein Raster verwendet, um ein SVG-Symbol mit einem unsichtbar" <select>-Element.

Grid-Entwicklertools werden über einer Schaltfläche angezeigt, wobei sowohl Zeile als auch Spalte „Stack“ genannt.

.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 Überlauf-Stilen wird die folgende UX eingerichtet:

  • Horizontales Scrollen mit Overscroll-Begrenzung.
  • Horizontaler Abstand beim Scrollen.
  • Ein Andockpunkt auf dem letzten Navigationspfad. Das bedeutet, dass beim Laden der Seite die angedockt und im sichtbaren Bereich geladen wurden.
  • Entfernt den Andockpunkt aus Safari, der Probleme mit der horizontalen Kombinationen von Scroll- und Snap-Effekten.

Medienabfragen

Eine kleine Anpassung für kleinere Darstellungsbereiche besteht darin, beschriftet, sodass sie nur das Symbol:

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

Neben den Navigationspfaden mit und ohne Home-Label, vergleichen.

Bedienungshilfen

Bewegung

In dieser Komponente gibt es nicht viel Bewegung, aber wenn Sie bei einer prefers-reduced-motion-Prüfung 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 Mouseover- und Fokus-Effekte sind großartig. ohne transition sinnvoll und aussagekräftig. Wenn Bewegung jedoch zulässig ist, fügen wir zur Interaktion.

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: Zur Normalisierung der Nutzererfahrung Es kommt nicht zu unerwarteten Navigationen, wenn Nutzer nur im Web surfen: <select> Optionen.

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 über die Tastatur in den Optionen blä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.

Ein besserer geänderter Termin für <select>

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
  })
})

Dabei wird versucht, bei jedem <select> auf Keyboard-down-Ereignisse zu achten. und ermitteln, ob die gedrückte Taste die Navigationsbestätigung war (Tab oder Enter) oder räumliche Navigation (ArrowUp oder ArrowDown). Damit kann die Komponente entscheiden, ob sie abwarten oder gehen möchte, wenn das Ereignis <select>-Element wird ausgelöst.

Fazit

Jetzt, wo du weißt, wie ich es 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.

Community-Remixe