Die Responsive Navigation Breadcrumb

Die Navigation ist das wichtigste Interaktionselement auf einer größeren Seite oder App. Sie muss dem Benutzer jederzeit Orientierung bieten, gibt ein Gefühl für den Umfang des Ganzen und zeigt Möglichkeiten für einen tieferen Einstieg in das Thema an.

Zusätzlich muss die Navigation aber auch auf kleinen Bildschirmen funktionieren und darf nicht im Weg stehen, denn der eigentliche Inhalt ist definitiv wichtiger, als die Entscheidung, wohin man sich als nächstes bewegt.

Die bekannten Muster für Multi-Level Responsive Navigation sind Lösungen, die das direkte Navigieren von einer Seite auf jede beliebige andere Seite im Seitenbaum ermöglichen.

Dabei wird aber ein wichtiger Punkt vernachlässigt: Der Nutzer weiß nie, wo genau er sich gerade befindet. Außerdem ist es ein seltener Anwendungsfall, tief aus einer Hauptkategorie direkt tief in eine andere zu springen. In der Regeln möchte man das gerade gelesene Thema weiter vertiefen.

Breadcrumbs

Um Orientierung auf der Seite zu gewährleisten, dient die klassische Breadcrumb-Navigation.

Sie zeigt den Pfad im Seitenbaum zur aktuellen Seite an, und verlinkt dabei die einzelnen Knoten:

⌂ BLAK > Studenten und PhiP > Begleitender Unterricht

Dadurch ist eine Orientierung sehr schnell möglich, und man kann relativ einfach in höhere Ebenen wechseln.

Die genannte Muster-Sammlung zeigt auch Möglichkeiten auf, Breadcrumbs für kleine Bildschirme zu kürzen. Eine Lösung ist zum Beispiel, nur die tiefer liegenden Seiten anzuzeigen, so weit Platz ist, und die Navigation aufwärts nur schrittweise oder ganz hinauf zu ermöglichen:

⌂ BLAK > … > Begleitender Unterricht

Die Breadcrumb ist eine leicht verständliche Möglichkeit, im Seitenbaum höher zu navigieren. Was also noch fehlt, ist die Möglichkeit tiefer abzusteigen.

Die Responsive-Navigation-Breadcrumb

Die Lösung für dieses Problem ist eine Navigation, die nur die direkten Unterseiten der aktuell geöffneten Seite auflistet. Über diese kann schrittweise eine Ebene tiefer navigiert werden, und damit ebenfalls an das Ende des Seitenbaums.

Die Kombination der beiden bekannten Navigations-Muster ermöglicht Orientierung und Navigation im gesamten Seitenbaum, und ist dabei so schlank wie nötig, um für kleine Bildschirme Platz zu sparen:

⌂ BLAK > … > Begleitender Unterricht:
Anmeldung, Termine, Skripten

CSS genügt

Je nachdem, ob bei viel Platz eine Breadcrumb zusätzlich zur Navigation existieren soll, schlagen wir eine Lösung mit Breadcrumb und einer Navigationsliste, oder nur mit einer Navigationsliste vor.

Lösung ohne zusätzliche Breadcrumb

Bei nur einer verschachtelten Liste zur Navigation kann diese mit CSS so gestaltet werden, dass nur alle Seiten auf dem Pfad angezeigt werden, und danach die Unterpunkte angeboten werden. Natürlich alles inline.

nav li {
  display: none;
  }
  nav li.trail,
  nav li.trail > ul {
    display: inline;
    }
    nav li.trail::after {
      content: " > ";
      }
    nav li.active > ul {
      display: block;
      }
      nav li.active > ul > li {
        display: inline;
        }

Lösung mit zusätzlicher Breadcrumb

Bei einer zusätzlichen Breadcrumb wird von der Navigation dann eben alles ausgeblendet, bis auf die Unterseiten der aktiven Seite:

nav li {
  display: none;
  }
  nav li.active > ul {
    display: block;
    }
    nav li.active > ul > li {
      display: inline;
      }