Version: latest

Universell einsetzbar

Sidenav funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/sidenav) — die Library erkennt die Umgebung automatisch.

Sidenav

Sidenav rendert eine vertical navigation panel. Unterstützt nested sections, icon labels, collapsible groups, and automatic active-item highlighting based on the current URL.

Übersicht

import { Sidenav } from "@prokodo/ui/sidenav"
;<Sidenav
  items={[
    { label: "Home", href: "/", icon: "home" },
    {
      label: "Products",
      icon: "box",
      children: [
        { label: "All products", href: "/products" },
        { label: "Categories", href: "/products/categories" },
      ],
    },
  ]}
/>

Live PreviewOpen in Storybook ↗

Import

import { Sidenav } from "@prokodo/ui/sidenav"

CSS:

import "@prokodo/ui/sidenav.css"

Props

Prop	Typ	Standard	Pflicht	Beschreibung
`items`	`SideNavItem[]`	—	—	Einfache Liste von Navigationseinträgen. Wird ignoriert, wenn `sections` gesetzt ist.
`sections`	`SideNavSection[]`	—	—	Navigation in benannte Abschnitte unterteilt. Hat Vorrang vor `items`.
`headlineProps`	`Omit<HeadlineProps, "children">`	—	—	Standard-Props für die `Headline`-Komponente jedes Abschnitts. Abschnitts-`headlineProps` haben Vorrang.
`descriptionProps`	`Omit<HTMLAttributes<p>, "children">`	—	—	Standard-Props für das Beschreibungs-`<p>` jedes Abschnitts. Abschnitts-`descriptionProps` haben Vorrang.
`collapsed`	`boolean`	`false`	—	Klappt die Navigation auf Icon-Only-Modus zusammen.
`onCollapse`	`(collapsed: boolean) => void`	—	—	Wird beim Umschalten des Collapse-Zustands aufgerufen.
`className`	`string`	—	—	CSS-Klasse am Root-`<aside>`-Element.

`SideNavSection`

Prop	Typ	Standard	Pflicht	Beschreibung
`items`	`SideNavItem[]`	—	✅	Navigationseinträge dieses Abschnitts.
`headline`	`string`	—	—	Klartext-Überschrift des Abschnitts, gerendert via der internen `Headline`-Komponente (im Collapsed-Modus versteckt).
`description`	`string`	—	—	Kurzbeschreibung unterhalb der Überschrift.
`headlineComponent`	`ComponentType<{ className?: string }>`	—	—	Benutzerdefinierte React-Komponente statt `headline`-String.
`headlineProps`	`Omit<HeadlineProps, "children">`	—	—	Props für die `Headline`-Komponente dieses Abschnitts (überschreibt globale `headlineProps`).
`descriptionProps`	`Omit<HTMLAttributes<p>, "children">`	—	—	Props für das Beschreibungs-`<p>` dieses Abschnitts (überschreibt globale `descriptionProps`).

Siehe src/components/sidenav/Sidenav.model.ts für den vollständigen SidenavProps-Typ.

AIC-Hinweis

Verwende im Anwendungscode immer den Standard-Importpfad:

import { Sidenav } from "@prokodo/ui/sidenav"

Eine separate Auswahl von /client oder /lazy ist im Consumer-Code nicht erforderlich.

AIC-Komponenten unterstützen außerdem ein priority-Flag für kritische Above-the-fold-Elemente. Am sichtbarsten ist das bei Image (natives Preloading via <link rel="preload"> für Above-the-fold-Inhalte).

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
2.1.1	Tastatur (A)	🔍 Manuell prüfen	Alle Funktionalität muss allein über Tastatur bedienbar sein, ohne Timing-Anforderungen.
2.4.3	Fokusreihenfolge (A)	🔍 Manuell prüfen	Die Tastaturfokus-Reihenfolge muss im vollständigen seitenseitigen Integrationskontext Bedeutung und Bedienbarkeit erhalten.
2.4.7	Fokus sichtbar (AA)	🔍 Manuell prüfen	Auf jedem interaktiven Element muss ein sichtbarer Tastaturfokus-Indikator vorhanden sein. Prüfung gegen das angewendete Produkt-Theme erforderlich.
2.4.11	Fokus nicht verdeckt (Min.) (AA)	🔍 Manuell prüfen	Die fokussierte Komponente darf nicht vollständig durch Sticky-Header, Overlays oder andere positionierte Seitenelemente verdeckt sein.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.

Testabdeckung: 2 jest-axe-Assertion(s) in 4 Testdatei(en) · 3 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Design Tokens

Sidenav lässt sich über CSS Custom Properties an :root oder einem umgebenden Element anpassen.

Token	Standardwert	Beschreibung
`--pk-sidenav-bg`	`var(--pk-color-surface)`	Hintergrundfarbe des Seitenleisten-Panels
`--pk-sidenav-shadow`	`var(--pk-shadow-md)`	Box-Shadow des Seitenleisten-Panels
`--pk-sidenav-toggle-hover`	`var(--pk-color-surface-raised)`	Hintergrundfarbe des Toggle-Buttons bei Hover
`--pk-sidenav-link-hover-bg`	`color-mix(in srgb, var(--pk-color-brand) 10%, transparent)`	Hintergrundfarbe der Nav-Einträge bei Hover/Aktiv
`--pk-sidenav-link-active-bg`	`color-mix(in srgb, var(--pk-color-brand) 5%, transparent)`	Hintergrundfarbe des aktuellen Seiten-Nav-Eintrags
`--pk-sidenav-icon-color`	`var(--pk-color-fg)`	Icon-Vordergrundfarbe
`--pk-sidenav-icon-bg`	`var(--pk-color-surface-raised)`	Hintergrundfarbe des Icon-Wrappers
`--pk-sidenav-label-color`	`color-mix(in srgb, var(--pk-color-fg) 70%, transparent)`	Farbe von Collapse-Icon und -Label
`--pk-sidenav-fg`	`var(--pk-color-fg)`	Hauptfarbe der Nav-Eintrags-Labels
`--pk-sidenav-radius`	`var(--pk-radius-sm)`	Border-Radius für Nav-Einträge und Icon-Wrapper
`--pk-sidenav-gap`	`var(--pk-space-xs)`	Abstand zwischen den Nav-Listen-Einträgen
`--pk-sidenav-link-gap`	`var(--pk-space-md)`	Interner Abstand innerhalb eines Nav-Eintrags
`--pk-sidenav-section-headline-color`	`color-mix(in srgb, var(--pk-color-fg) 45%, transparent)`	Farbe der Abschnitts-Überschriften

Storybook

👉 Sidenav in Storybook öffnen

Quellcode

src/components/sidenav/Sidenav.model.ts