Skip to main content

Nav

Eine Navigationsleiste ist eine Gruppe von verwandten Links oder Navigationselementen, die durch Anklicken eine Aktion ausführen oder Inhalte anzeigen. Sie navigiert Nutzer:innen direkt zu bestimmten Inhalten der aktuellen Seite oder zu externen Seiten. Außerdem dient sie Nutzer:innen (ähnlich wie Registerkarten) als Steuerelement, um Inhalte anzuzeigen, auszublenden und zwischen ihnen zu wechseln.

KoliBri stellt eine umfangreich konfigurierbare, vertikale oder horizontale Navigationsleiste zur Verfügung, die mehrere Ebenen darstellen und in der Breite variiert werden kann. Übergeordnete Menüpunkte die Untermenüpunkte enthalten, werden mit einem Plus-Icon am rechten Rand angezeigt. Wird der übergeordnete Menüpunkt mit dem Plus-Icon geöffnet, ändert sich das Plus-Icon automatisch zu einem Minus-Icon, mit dem der Menüpunkt wieder geschlossen werden kann.

Aktive Menüpunkte werden mit einer farbigen Markierung dargestellt.

Über eine optionale Schaltfläche unterhalb der Navigation kann die Breite der Nav-Komponente verändert werden. In der kleinsten Breite werden die Menütitel ausgeblendet und nur noch die Icons ausgegeben.

Konstruktion​

Code​

<kol-nav
 _label="Navigation"
 _links="[
 {
 '_href': 'startseite',
 '_icon': 'codicon codicon-home',
 '_label': 'Startseite',
 '_children': [
 {
 '_href': 'startseite/1-untermenuepunkt',
 '_icon': 'codicon codicon-home',
 '_label': '1. Untermenüpunkt'
 },
 {
 '_href': 'startseite/2-untermenuepunkt',
 '_icon': 'codicon codicon-home',
 '_label': '2. Untermenüpunkt'
 }
 ]
 },
 {
 '_href': 'unterseite',
 '_icon': 'codicon codicon-home',
 '_label': '2. Menüpunkt'
 }
 ]"
 _has-compact-button
></kol-nav>

Beispiel​

Verwendung​

Die Navigationsstruktur wird als Objekt oder JSON-String an das Attribut _links übergeben. Die Struktur ist als Wert/Parameter-Paar aufgebaut: Um Untermenüpunkte zu erzeugen, erweitern Sie die JSON-Struktur um das zusätzliche Attribut _children im übergeordneten Element.

[
 {
  _href: 'startseite',
  _icons: 'codicon codicon-home',
  _label: 'Startseite',
  _children: [
   { _href: 'startseite/1-untermenuepunkt', _icons: 'codicon codicon-home', _label: '1. Untermenüpunkt' },
   { _href: 'startseite/2-untermenuepunkt', _icons: 'codicon codicon-home', _label: '2. Untermenüpunkt' },
  ],
 },
 { _href: 'unterseite', _icons: 'codicon codicon-home', _label: '2. Menüpunkt' },
];

Kompakte Navigationsleiste anzeigen​

Um die Navigationsleiste in der kompakten Darstellung auszugeben, setzen Sie das Attribut _hide-label.

Umschalter normale/kompakte Darstellung​

Um eine Schaltfläche einzublenden, die die kompakte Darstellung an/aus schaltet, setzen Sie das Attribut _hasCompact-button. Diese Schaltfläche erscheint unterhalb der Navigation und wird nur bei vertikaler Ausrichtung angezeigt.

Umschaltung horizontale/vertikale Ausrichtung​

Die Ausrichtung der Navigationsleiste kann mit dem Attribut _orientation umgeschaltet werden. Mögliche Werte sind:

  • horizontal
  • vertical

Best practices​

  • Verwenden Sie Navigationsleisten, um Navigation oder navigationsähnliche Aktionen darzustellen (z. B. interne oder externe Links, Abmelden, Kontrolle der Sichtbarkeit auf der Seite).
  • Verwenden Sie das Label, um eine klare und präzise Beschreibung des Inhalts zu diesem bestimmten Navigationselement bereitzustellen.
  • Verwenden Sie keine Navigationsleisten für Aktionen, die besser als Schaltflächen dargestellt werden (z. B. „Speichern“, „Löschen“, „Artikel in den Warenkorb legen“).
  • Stapeln Sie nicht mehrere Navigationsleisten direkt nebeneinander.
  • Verwenden Sie keine Navigationsleisten zum Vergleichen von Inhalten (z. B. unterschiedliche Leistungen).
  • Berücksichtigen Sie die Anzahl der Navigationselemente, die Sie in die Navigationsleiste einfügen. Wenn Sie das Gefühl haben, dass die Zahl zu groß wird, ziehen Sie alternative Ansätze zur Präsentation des Inhalts in Betracht oder verwenden Sie ein anderes Navigationsmuster/eine andere Komponente.

Anwendungsfälle​

  • Verwenden Sie Navigationsleisten als In-Page-Navigation auf einer Landingpage.
  • Verwenden Sie Navigationsleisten, um verwandte Informationen auf einer Landingpage zu organisieren.
  • Nutzen Sie Navigationsleisten, um Angebote oder Vorteile in verschiedene Kategorien einzuordnen (z.B. Formulare).
  • Verwenden Sie Navigationsleisten, um FAQs in verschiedene Kategorien zu unterteilen.

Barrierefreiheit​

Tastatursteuerung​

TasteFunktion
TabFokussiert den ersten Menüpunkt in der Navigation. Nachfolgend kann mit der Tab-Taste jeder Menüpunkt angesprungen werden. Wenn der Has-compact-Button aktiviert wurde, ist dieser ebenfalls mit der Tab-Taste erreichbar.
EnterKlappt Unterpunkte auf/zu, sofern eine Ausklappschaltfläche fokussiert ist, aktiviert die Schaltfläche oder öffnet den Link anderenfalls.

Properties​

PropertyAttributeDescriptionTypeDefault
_ariaCurrentValue_aria-current-valueDefines the value of aria-current to be used with the current context within the navigation."date" | "location" | "page" | "step" | "time" | booleanfalse
_ariaLabel_aria-label[DEPRECATED] use _label instead

Deprecated: Setzt die semantische Beschriftung der Komponente.		string | undefinedundefined
_collapsible_collapsibleDefines if navigation nodes can be collapsed or not. Enabled by default.boolean | undefinedtrue
_compact_compact[DEPRECATED] Use _hide-label

Deprecated: Gibt an, ob die Navigation kompakt angezeigt wird.		boolean | undefinedfalse
_hasCompactButton_has-compact-button[DEPRECATED] Version 2

Deprecated: Gibt an, ob die Navigation eine zusätzliche Schaltfläche zum Aus- und Einklappen der Navigation anzeigen soll.		boolean | undefinedfalse
_hideLabel_hide-labelHides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.boolean | undefinedfalse
_label_labelDefines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).string | undefinedundefined
_links (required)_linksDefines the list of links, buttons or texts to render.ButtonOrLinkOrTextWithChildrenProps[] | stringundefined
_orientation_orientationDefines whether the orientation of the component is horizontal or vertical."horizontal" | "vertical" | undefined'vertical'
_variant_variant[DEPRECATED] This property is deprecated and will be removed in the next major version.

Deprecated: Defines which variant should be used for presentation.		"primary" | "secondary" | undefined'primary'

Live-Editor​

Beispiele​