Nav
Synonyme: Navigation, Menu, Sidebar
Beschreibung: Eine Nav-Komponente ist eine Gruppe von verwandten Links oder Navigationselementen, die Nutzer:innen direkt zu bestimmten Inhalten oder externen Seiten führen. Sie ermöglicht hierarchische Navigationsstrukturen mit mehreren Ebenen und unterstützt kompakte Darstellungsmodi für platzbegrenzte Layouts.
Beispiel
Darstellung der Navigationsleiste mit Hierarchie und Icons.
<KolNav _label="Hauptmenü" _links={[{"_href":"#/","_icons":"kolicon-house","_label":"Startseite","_children":[{"_href":"#/1","_icons":"kolicon-house","_label":"1. Untermenüpunkt"},{"_href":"#/2","_icons":"kolicon-house","_label":"2. Untermenüpunkt"}]},{"_href":"#/seite-2","_icons":"kolicon-house","_label":"2. Menüpunkt"}]} />Barrierefreiheit
- Die Navigation wird als semantische Landmark mit
<nav>-Element ausgegeben, um Nutzer:innen mit Screenreadern zu helfen. - Alle Navigationspunkte sind über die Tastatur erreichbar und fokussierbar.
- Übergeordnete Menüpunkte mit Untermenüs werden durch visuell erkennbare Symbole (Plus/Minus) gekennzeichnet.
- Die aktive Navigationsposition wird visuell und semantisch gekennzeichnet.
- Labels sind zwingend erforderlich und werden von assistiven Technologien erkannt.
Links und Referenzen
Verwendung
Tastatursteuerung
| Taste | Funktion |
|---|---|
Tab | Fokussiert Navigationspunkte und den optionalen Compact-Button. Navigation durch alle fokussierbaren Elemente. |
Enter | Aktiviert den fokussierten Link oder öffnet/schließt Untermenüs bei fokussierten Eltern-Navigationspunkten. |
Best Practices / Empfehlungen
- Verwenden Sie die Nav-Komponente für Hauptnavigation, Seitennavigation und strukturierte Inhaltsverzeichnisse.
- Strukturieren Sie die Navigationshierarchie logisch, mit maximal 2–3 Ebenen, um Nutzer:innen nicht zu überfordern.
- Nutzen Sie aussagekräftige, prägnante Labels, die das Ziel oder den Inhalt klar beschreiben.
- Verwenden Sie Icons nur ergänzend zu Labels – nie als Ersatz.
- Deaktivieren Sie
_collapsiblenur, wenn die Navigation klein genug ist und keine Komprimierung nötig ist. - Nutzen Sie
_hasCompactButtonfür Navigationen mit vielen Einträgen, um Platz zu sparen. - Verwenden Sie
_hideLabelund den Compact-Modus, um eine kompakte Seiten-Navigation zur Verfügung zu stellen. - Vermeiden Sie zu tiefe Verschachtelungen – verwenden Sie stattdessen mehrere flachere Ebenen oder alternative Navigationsmuster.
Anwendungsfälle
- Hauptnavigation einer Website oder Anwendung
- Seiten-Sidebar mit Inhaltsverzeichnis
- Nicht-lineare Navigation mit mehreren Ebenen
- Admin-Dashboards oder Verwaltungsoberflächen mit kategorisierter Funktionalität
- Breadcrumb-ähnliche Navigationsstrukturen
- Filterverwaltung und Kategorie-Navigation in e-Commerce-Anwendungen
FAQ
Kann ich die Navigation horizontal darstellen?
Die aktuelle Komponente ist für vertikale Layouts optimiert. [Information nicht im Code gefunden]
Wie viele Ebenen werden unterstützt?
Unbegrenzt viele Ebenen sind theoretisch möglich, aber praktisch sollten es maximal 2–3 sein, um die Usability zu gewährleisten.
Wie kann ich die Navigationsbreite ändern?
Nutzen Sie _hasCompactButton, um einen Button unterhalb der Navigation anzuzeigen, der zwischen normaler und kompakter Darstellung (nur Icons) umschaltet.
Konstruktion / Technik
Playground
<KolNav _label="Hauptmenü" _links={[{"_href":"#/","_icons":"kolicon-house","_label":"Startseite","_children":[{"_href":"#/1","_icons":"kolicon-house","_label":"1. Untermenüpunkt"},{"_href":"#/2","_icons":"kolicon-house","_label":"2. Untermenüpunkt"}]},{"_href":"#/seite-2","_icons":"kolicon-house","_label":"2. Menüpunkt"}]} />Funktionalitäten (mit Code)
Basis-Navigation
Einfache flache Navigation ohne Untermenüs.
<KolNav _label="Navigation" _links={[{"_href":"#start","_icons":"kolicon-house","_label":"Startseite"},{"_href":"#about","_icons":"kolicon-info","_label":"Über uns"}]} />Hierarchische Navigation mit Untermenüs
Navigation mit mehreren Ebenen durch Nutzung von _children:
<KolNav _label="Navigation" _links={[{"_href":"#start","_icons":"kolicon-house","_label":"Startseite","_children":[{"_href":"#start/sub1","_icons":"kolicon-house","_label":"1. Untermenüpunkt"},{"_href":"#start/sub2","_icons":"kolicon-house","_label":"2. Untermenüpunkt"}]},{"_href":"#about","_icons":"kolicon-info","_label":"Über uns"}]} />Kompatter Modus mit Button
Compact-Button zum Umschalten zwischen voller und Icon-nur Anzeige:
<KolNav _hasCompactButton={true} _label="Navigation" _links={[{"_href":"#/","_icons":"kolicon-house","_label":"Startseite","_children":[{"_href":"#/1","_icons":"kolicon-house","_label":"1. Untermenüpunkt"},{"_href":"#/2","_icons":"kolicon-house","_label":"2. Untermenüpunkt"}]},{"_href":"#/seite-2","_icons":"kolicon-house","_label":"2. Menüpunkt"}]} />Icons auch im erweiterten Modus
Icons werden neben Labels auch in der normalen (nicht kompakten) Darstellung angezeigt:
<KolNav _hasIconsWhenExpanded={true} _label="Navigation" _links={[{"_href":"#/","_icons":"kolicon-house","_label":"Startseite","_children":[{"_href":"#/1","_icons":"kolicon-house","_label":"1. Untermenüpunkt"},{"_href":"#/2","_icons":"kolicon-house","_label":"2. Untermenüpunkt"}]},{"_href":"#/seite-2","_icons":"kolicon-house","_label":"2. Menüpunkt"}]} />Kompakte Labels mit Tooltips
Hide-Label-Modus versteckt die Beschriftung und zeigt sie nur als Tooltip bei Hover/Focus:
<KolNav _hideLabel={true} _label="Navigation" _links={[{"_href":"#/","_icons":"kolicon-house","_label":"Startseite","_children":[{"_href":"#/1","_icons":"kolicon-house","_label":"1. Untermenüpunkt"},{"_href":"#/2","_icons":"kolicon-house","_label":"2. Untermenüpunkt"}]},{"_href":"#/seite-2","_icons":"kolicon-house","_label":"2. Menüpunkt"}]} />Nicht-kollabierbare Navigation
Wenn _collapsible deaktiviert ist, können Untermenüs nicht geöffnet/geschlossen werden:
<KolNav _collapsible={false} _label="Navigation" _links={[{"_href":"#/","_icons":"kolicon-house","_label":"Startseite","_children":[{"_href":"#/1","_icons":"kolicon-house","_label":"1. Untermenüpunkt"},{"_href":"#/2","_icons":"kolicon-house","_label":"2. Untermenüpunkt"}]},{"_href":"#/seite-2","_icons":"kolicon-house","_label":"2. Menüpunkt"}]} />Events
Zur Behandlung von Events bzw. Callbacks siehe
| Event | Auslöser | Value |
|---|---|---|
click | Navigationspunkt oder Kompakt-Button wird angeklickt | - |
API
Overview
The Nav component renders a group of related links or navigation elements that perform an action or display content when clicked. It provides a highly configurable vertical or horizontal navigation bar that can represent multiple levels and vary in width.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_collapsible | _collapsible | Defines if navigation nodes can be collapsed or not. Enabled by default. | boolean | undefined | true |
_hasCompactButton | _has-compact-button | Creates a button below the navigation, that toggles _collapsible. | boolean | undefined | false |
_hasIconsWhenExpanded | _has-icons-when-expanded | Shows icons next to the navigation item labels, even when the navigation is not collapsed. | boolean | undefined | false |
_hideLabel | _hide-label | Hides 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 | undefined | false |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined |
_links (required) | _links | Defines the list of links, buttons or texts to render. | ButtonOrLinkOrTextWithChildrenProps[] | string | undefined |
Verwendung
Tastatursteuerung
| Taste | Funktion |
|---|---|
Tab | Fokussiert Navigationspunkte und den optionalen Compact-Button. Navigation durch alle fokussierbaren Elemente. |
Enter | Aktiviert den fokussierten Link oder öffnet/schließt Untermenüs bei fokussierten Eltern-Navigationspunkten. |
Best Practices / Empfehlungen
- Verwenden Sie die Nav-Komponente für Hauptnavigation, Seitennavigation und strukturierte Inhaltsverzeichnisse.
- Strukturieren Sie die Navigationshierarchie logisch, mit maximal 2–3 Ebenen, um Nutzer:innen nicht zu überfordern.
- Nutzen Sie aussagekräftige, prägnante Labels, die das Ziel oder den Inhalt klar beschreiben.
- Verwenden Sie Icons nur ergänzend zu Labels – nie als Ersatz.
- Deaktivieren Sie
_collapsiblenur, wenn die Navigation klein genug ist und keine Komprimierung nötig ist. - Nutzen Sie
_hasCompactButtonfür Navigationen mit vielen Einträgen, um Platz zu sparen. - Verwenden Sie
_hideLabelund den Compact-Modus, um eine kompakte Seiten-Navigation zur Verfügung zu stellen. - Vermeiden Sie zu tiefe Verschachtelungen – verwenden Sie stattdessen mehrere flachere Ebenen oder alternative Navigationsmuster.
Anwendungsfälle
- Hauptnavigation einer Website oder Anwendung
- Seiten-Sidebar mit Inhaltsverzeichnis
- Nicht-lineare Navigation mit mehreren Ebenen
- Admin-Dashboards oder Verwaltungsoberflächen mit kategorisierter Funktionalität
- Breadcrumb-ähnliche Navigationsstrukturen
- Filterverwaltung und Kategorie-Navigation in e-Commerce-Anwendungen
FAQ
Kann ich die Navigation horizontal darstellen?
Die aktuelle Komponente ist für vertikale Layouts optimiert. [Information nicht im Code gefunden]
Wie viele Ebenen werden unterstützt?
Unbegrenzt viele Ebenen sind theoretisch möglich, aber praktisch sollten es maximal 2–3 sein, um die Usability zu gewährleisten.
Wie kann ich die Navigationsbreite ändern?
Nutzen Sie _hasCompactButton, um einen Button unterhalb der Navigation anzuzeigen, der zwischen normaler und kompakter Darstellung (nur Icons) umschaltet.
Konstruktion / Technik
Playground
<KolNav _label="Hauptmenü" _links={[{"_href":"#/","_icons":"kolicon-house","_label":"Startseite","_children":[{"_href":"#/1","_icons":"kolicon-house","_label":"1. Untermenüpunkt"},{"_href":"#/2","_icons":"kolicon-house","_label":"2. Untermenüpunkt"}]},{"_href":"#/seite-2","_icons":"kolicon-house","_label":"2. Menüpunkt"}]} />Funktionalitäten (mit Code)
Basis-Navigation
Einfache flache Navigation ohne Untermenüs.
<KolNav _label="Navigation" _links={[{"_href":"#start","_icons":"kolicon-house","_label":"Startseite"},{"_href":"#about","_icons":"kolicon-info","_label":"Über uns"}]} />Hierarchische Navigation mit Untermenüs
Navigation mit mehreren Ebenen durch Nutzung von _children:
<KolNav _label="Navigation" _links={[{"_href":"#start","_icons":"kolicon-house","_label":"Startseite","_children":[{"_href":"#start/sub1","_icons":"kolicon-house","_label":"1. Untermenüpunkt"},{"_href":"#start/sub2","_icons":"kolicon-house","_label":"2. Untermenüpunkt"}]},{"_href":"#about","_icons":"kolicon-info","_label":"Über uns"}]} />Kompatter Modus mit Button
Compact-Button zum Umschalten zwischen voller und Icon-nur Anzeige:
<KolNav _hasCompactButton={true} _label="Navigation" _links={[{"_href":"#/","_icons":"kolicon-house","_label":"Startseite","_children":[{"_href":"#/1","_icons":"kolicon-house","_label":"1. Untermenüpunkt"},{"_href":"#/2","_icons":"kolicon-house","_label":"2. Untermenüpunkt"}]},{"_href":"#/seite-2","_icons":"kolicon-house","_label":"2. Menüpunkt"}]} />Icons auch im erweiterten Modus
Icons werden neben Labels auch in der normalen (nicht kompakten) Darstellung angezeigt:
<KolNav _hasIconsWhenExpanded={true} _label="Navigation" _links={[{"_href":"#/","_icons":"kolicon-house","_label":"Startseite","_children":[{"_href":"#/1","_icons":"kolicon-house","_label":"1. Untermenüpunkt"},{"_href":"#/2","_icons":"kolicon-house","_label":"2. Untermenüpunkt"}]},{"_href":"#/seite-2","_icons":"kolicon-house","_label":"2. Menüpunkt"}]} />Kompakte Labels mit Tooltips
Hide-Label-Modus versteckt die Beschriftung und zeigt sie nur als Tooltip bei Hover/Focus:
<KolNav _hideLabel={true} _label="Navigation" _links={[{"_href":"#/","_icons":"kolicon-house","_label":"Startseite","_children":[{"_href":"#/1","_icons":"kolicon-house","_label":"1. Untermenüpunkt"},{"_href":"#/2","_icons":"kolicon-house","_label":"2. Untermenüpunkt"}]},{"_href":"#/seite-2","_icons":"kolicon-house","_label":"2. Menüpunkt"}]} />Nicht-kollabierbare Navigation
Wenn _collapsible deaktiviert ist, können Untermenüs nicht geöffnet/geschlossen werden:
<KolNav _collapsible={false} _label="Navigation" _links={[{"_href":"#/","_icons":"kolicon-house","_label":"Startseite","_children":[{"_href":"#/1","_icons":"kolicon-house","_label":"1. Untermenüpunkt"},{"_href":"#/2","_icons":"kolicon-house","_label":"2. Untermenüpunkt"}]},{"_href":"#/seite-2","_icons":"kolicon-house","_label":"2. Menüpunkt"}]} />Events
Zur Behandlung von Events bzw. Callbacks siehe
| Event | Auslöser | Value |
|---|---|---|
click | Navigationspunkt oder Kompakt-Button wird angeklickt | - |
API
Overview
The Nav component renders a group of related links or navigation elements that perform an action or display content when clicked. It provides a highly configurable vertical or horizontal navigation bar that can represent multiple levels and vary in width.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_collapsible | _collapsible | Defines if navigation nodes can be collapsed or not. Enabled by default. | boolean | undefined | true |
_hasCompactButton | _has-compact-button | Creates a button below the navigation, that toggles _collapsible. | boolean | undefined | false |
_hasIconsWhenExpanded | _has-icons-when-expanded | Shows icons next to the navigation item labels, even when the navigation is not collapsed. | boolean | undefined | false |
_hideLabel | _hide-label | Hides 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 | undefined | false |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined |
_links (required) | _links | Defines the list of links, buttons or texts to render. | ButtonOrLinkOrTextWithChildrenProps[] | string | undefined |