Über Navigationen kann man nicht viel schreiben. Oder doch? Im Wesentlichen handelt es sich bei Navigationen um Linksammlungen, deren verlinkte Texte auf Unterbereiche oder einzelne Seiten einer Website verweisen, so dass Besucher diese Seiten direkt erreichen können. Typischerweise sind solche Links um so auffälliger und werden mit um so mehr Aufwand gestaltet, je relevanter oder wichtiger sie eingestuft werden. Idealerweise geht aus einer Hauptnavigation (oft auch „Hauptmenü“ genannt) hervor, wie die Website strukturiert ist, um ihre Besucher dabei zu unterstützen, die sie interessierenden Inhalte zu finden und zu nutzen.

Daraus ergibt sich, dass neben einer gut zu überblickenden Website-Struktur klare und deutliche Menüeinträge viel dazu beitragen können, dass Besucher schnell und treffsicher erfassen, zu welchen Inhalten diese Links sie führen werden. Navigationseinträge mit sprechenden Icons, mit oder ohne Text, können ausgesprochen hilfreich dabei sein, dieses Ziel zu erreichen und in der Folge bewirken, dass der Traffic auf Ihrer Website zunimmt.

In dieser Anleitung zeigen wir Ihnen, wie man die Benutzerfreundlichkeit von Navigationen verbessern kann, indem man deren Einträge mit Icons aussagekräftiger macht. Um die dafür erforderlichen Schritte leicht nachvollziehen zu können, ist es hilfreich, die Funktionsprinzipien von Scrivito zu kennen.

Wenden wir uns zunächst kurz dem Ursprung der Links zu, um die es hier geht: Wo kommen die Einträge in einer Navigation eigentlich her?

Es gibt mindestens drei Herangehensweisen, um die Elemente festzulegen, die in einer Navigation erscheinen sollen.

Bei Scrivito gibt es zwei Attributtypen (siehe die API-Doku 🇺🇸dazu), linklist und referencelist, mit denen Links manuell gepflegt werden können. Beide Typen eignen sich gut als Quelle von Navigationen. Während linklist-Attribute externe und interne Links aufnehmen können, sind referencelist-Attribute auf interne Links beschränkt, wodurch sie sich allerdings leichter handhaben lassen.

Beispielsweise wird in der Scrivito Example App im GalleryWidget eine referencelist verwendet, um die anzuzeigenden Bilder zu pflegen. Analog dazu ließe sich ein solches Attribut auch für Seiten nutzen.

Mit Scrivito können Seiten hierarchisch organisiert werden, basierend auf deren Pfad. Bei einer übergeordneten Seite („parent“) mit Unterseiten liefert die Methode children genau diese. Um ohne größeren Aufwand die Unterseiten einer Parent-Seite zu rendern, steht die React-Komponente Scrivito.ChildListTag zur Verfügung.

In der Example App wird diese Komponente auf Seiten angewendet, die unmittelbar unterhalb der root-Seite liegen und damit die Hauptnavigation bilden. Wie man eine solche Navigation entwickelt, wird in unserem Tutorial Building a Child Navigation 🇺🇸 gezeigt.

Wenn die Einträge einer Navigation auf Seiten verweisen sollen, die bestimmte Bedingungen erfüllen (etwa Seiten vom Typ „Blogpost“), können Sie eine Suche durchführen, um diese Seiten zu finden. In der Example App wird dieses Verfahren in der Komponente für die Blogpost-Übersicht angewendet.

Die NavSingleChild-Komponente wird innerhalb zweier Komponenten gerendert, von NavChild für Hauptnavigationspunkte ohne Untereinträge (wie „Product“), und von Dropdown für jeden einzelnen Untereintrag eines Hauptnavigationspunkts (wie „About“). Für einen Untereintrag rendert der obige Code ein <li>-Element, in dem ein Scrivito.LinkTag den title der Unterseite mit der Seite verlinkt. Das umgebende <ul>-Element wird von übergeordneten Komponenten wie Scrivito.ChildListTag ausgegeben.

Um ein Icon zusammen mit dem Titel einer Seite rendern zu lassen, müssen wir der Seite ein Icon zuweisen können. Hierfür werden wir als erstes deren Objektklasse Page mit einem enum-Attribut namens menuIcon ausstatten und es mit einer Auswahl von Icons aus der „Font Awesome“-Schrift belegen. „Font Awesome“ ist in der Example App enthalten.

Im nächsten Schritt erweitern wir die Konfiguration für die Bearbeitung von Seiten des Typs Page so, dass ein Redakteur eines dieser Icons auswählen (und damit menuIcon zuzuweisen) kann:

In der obigen Konfiguration wurde menuIcon zu den attributes und properties hinzugefügt. Dadurch wird das Attribut in den Eigenschaften von Seiten des Typs Page bearbeitbar. Sie können dies ausprobieren, indem Sie oben auf einen der Navigationspunkte klicken, etwa „Our Work“ unter „About“, und dann über die Seiteneigenschaften ein Menü-Icon auswählen. Die Example App enthält zahlreiche Icons, die sich hervorragend für diesen Zweck eignen – siehe die Datei „src/assets/stylesheets/fontawesome/_icons.scss“.

Wenn Sie Seiten eines weiteren Typs neben Page in der Hauptnavigation haben (in der Example App befindet sich dort auch eine LandingPage), so sollten deren jeweilige Objektkasse und Konfiguration für die Bearbeitung ebenfalls wie oben beschrieben um menuIcon erweitert werden, damit auch bei diesen Seiten ein Icon für die Navigation angegeben werden kann.

Geschafft! :)

Als Ergebnis unserer Bemühungen können die Punkte in einem Untermenü nun einzeln mit einem auswählbaren Icon versehen werden. Hierfür haben wir ein weiteres Attribut, menuIcon, in der Objektklasse Page und dessen Konfiguration für die Bearbeitung eingeführt. Beim Rendern wird dieses Attribut genutzt, um das zu verwendende Icon zu ermitteln und das Markup dafür zu erzeugen.

Wollte man auch bei Hauptnavigationspunkten, die ein Untermenü haben, Icons darstellen, empfiehlt es sich, den Code, der sich um das Icon kümmert, in eine Funktion auszulagern, die dann von der Dropdown-Komponente aufgerufen werden kann.