Messbarer Erfolg «10 Punkte-Checkliste für ein zukunftssicheres CMS» White Paper
Messbarer Erfolg - White Paper

Navigationen um Icons erweitern

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

Navigationseinträge festlegen

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

Die Einträge manuell pflegen

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.

Die hierarchische Struktur von 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.

Eine Suche verwenden

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.

Icons zur Hauptnavigation der Example App hinzufügen

Die Navigation der Scrivito Example App ist recht umfangreich, nicht nur, weil sie auch ein Logo und einen Button für die Suche enthält, am Seitenkopf fixiert ist und auf kleineren Bildschirmen reduziert wird. Sie berücksichtigt auch Landing Pages, bei denen alle diese Zusätze ausgeblendet werden, mit Ausnahme des Logos.

Der Code für die Navigation befindet sich in der Datei „src/Components/Navigation.js“ und nutzt die Dateien im Verzeichnis „src/Components/Navigation“. Wir können hier nicht die gesamte Konstruktion der Navigation beleuchten, sondern fokussieren uns auf den Code, der die einzelnen Einträge rendert, da dies die Stelle ist, die wir erweitern möchten.

In der Example App werden die einzelnen Untereinträge eines Navigationspunkts von der Komponente NavSingleChild gerendert:

src/Components/Navigation/NavChild.js
const NavSingleChild = Scrivito.connect(({ child, open, ...otherProps }) => {
  const classNames = ["nav-item"];
  if (open) {
    classNames.push("open");
  }
  if (isActive(child)) {
    classNames.push("active");
  }

  return (
    <li className={classNames.join(" ")} {...otherProps}>
      <Scrivito.LinkTag to={child} className="nav-link">
        {child.get("title") || "<untitled>"}
      </Scrivito.LinkTag>
    </li>
  );
});

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.

Voraussetzungen

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.

src/Objs/Page/PageObjectClass.js
// Imports

const Page = Scrivito.provideObjClass("Page", {
  attributes: {
    ...defaultPageAttributes,
    childOrder: "referencelist",
    ...metaDataAttributes,
    menuIcon: [
      "enum", {
        values: [
          "fa-globe",
          "fa-user",
          "fa-paper-plane-o",
          "fa-cogs",
          "fa-star-o",
          "fa-heart-o"
        ]
      }
    ]
  }
});

// ...

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:

src/Objs/Page/PageEditingConfig.js
// Imports

Scrivito.provideEditingConfig("Page", {
  title: "Page",
  thumbnail: PageObjIcon,
  attributes: {
    ...defaultPageEditingConfigAttributes,
    ...metaDataEditingConfigAttributes,
    menuIcon: {
      title: "Menu icon",
      description: "Default: none",
      values: [
        { value: "fa-globe", title: "Globe" },
        { value: "fa-user", title: "User" },
        { value: "fa-paper-plane-o", title: "Plane" },
        { value: "fa-cogs", title: "Cogs" },
        { value: "fa-star-o", title: "Star" },
        { value: "fa-heart-o", title: "Heart" },
      ],
    },
  },
  properties: ["menuIcon", ...defaultPageProperties],
  propertiesGroups: [socialCardsPropertiesGroup, metaDataPropertiesGroup],
  initialContent: {
    ...defaultPageInitialContent,
    ...metaDataInitialContent,
  },
});

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.

Die Icons rendern

Um die Icons wie oben angekündigt zu rendern, brauchen wir lediglich die Komponente NavSingleChild so zu erweitern, dass sie auf das menuIcon-Attribut zurückgreift:

src/Components/Navigation/NavChild.js
const NavSingleChild = Scrivito.connect(({ child, open, ...otherProps }) => {
  const classNames = ["nav-item"];
  if (open) {
    classNames.push("open");
  }
  if (isActive(child)) {
    classNames.push("active");
  }

  let menuIcon = child.get("menuIcon");

  if (menuIcon) {
    menuIcon = (
      <i
        className={`fa ${menuIcon} fa-1x fa-fw text-muted mr-2`}
        aria-hidden="true"
      />
    );
  }

  return (
    <li className={classNames.join(" ")} {...otherProps}>
      <Scrivito.LinkTag to={child} className='nav-link text-left text-nowrap'>
        {menuIcon}
        {child.get("title") || "<untitled>"}
      </Scrivito.LinkTag>
    </li>
  );
});

Die Seite, die in der Navigation erscheinen soll, wird der Funktion als child übergeben. Im weiteren Verlauf geschieht Folgendes:

  • In classNames werden CSS-Klassen zusammengetragen, abhängig vom Status des Menüs und des betreffenden Menüpunkts.
  • Im mittleren Teil, den wir hinzugefügt haben (ab var menuIcon;), wird das menuIcon-Attribut der child-Seite ausgelesen. Wenn ein Icon angegeben ist, wird es vom Markup berücksichtigt.
  • Im unteren Teil haben wir sowohl Markup für das menuIcon hinzugefügt als auch CSS-Klassen angegeben, die dafür sorgen, dass die Texte der Menüpunkte links ausgerichtet sind und nicht umbrechen.

Geschafft! :)

Zusammengefasst...

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.