Nav
Synonyme: Navigation, Menu, Sidebar, Dropdowns (menu)
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',
'_icons': 'codicon codicon-home',
'_label': 'Startseite2',
'_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'
}
]"
_has-compact-button
></kol-nav>
Beispiel
Verwendung
Links in der Navigationsleiste definieren
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.
Umschaltung horizontale/vertikale Ausrichtung
Die Ausrichtung der Navigationsleiste kann mit dem Attribut _orientation umgeschaltet werden. Mögliche Werte sind:
horizontalvertical
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
| Taste | Funktion |
|---|---|
Tab | Fokussiert 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. |
Enter | Klappt Unterpunkte auf/zu, sofern eine Ausklappschaltfläche fokussiert ist, aktiviert die Schaltfläche oder öffnet den Link anderenfalls. |
Synonyme: Navigation, Menu, Sidebar, Dropdowns (menu)
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',
'_icons': 'codicon codicon-home',
'_label': 'Startseite2',
'_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'
}
]"
_has-compact-button
></kol-nav>
Beispiel
Verwendung
Links in der Navigationsleiste definieren
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.
Umschaltung horizontale/vertikale Ausrichtung
Die Ausrichtung der Navigationsleiste kann mit dem Attribut _orientation umgeschaltet werden. Mögliche Werte sind:
horizontalvertical
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
| Taste | Funktion |
|---|---|
Tab | Fokussiert 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. |
Enter | Klappt Unterpunkte auf/zu, sofern eine Ausklappschaltfläche fokussiert ist, aktiviert die Schaltfläche oder öffnet den Link anderenfalls. |
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. Only available for _orientation="vertical". | 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 |
_orientation | _orientation | Defines whether the orientation of the component is horizontal or vertical. | "horizontal" | "vertical" | undefined | 'vertical' |