Sidebar Navigation für Anwendungen

Navigation für Anwendungen, mit Leiste auf Tablets und Schublade oder Tab-Leiste auf Telefonen.

5 Variants

Kategorie wechseln

Voll, eingeklappt oder schwebend

In einer Anwendung ist die Sidebar die Landkarte. Die fünf Sidebars hier nehmen deine Bereiche als Daten mit Icons, Zählern und Unterpunkten und ändern ihre Form mit dem Bildschirm, voll am Desktop, als schmale Leiste am Tablet und als Drawer oder Tab-Leiste am Handy.

„Vollständig“ zeigt jedes Label und passt zu Apps mit bis zu einem Dutzend Bereichen. „Nur Symbole“ gibt dem Inhalt mehr Breite und klappt bei Bedarf auf. „Arbeitsbereich wechseln“ stellt Teams oder Projekte nach oben, für Produkte mit mehreren Mandanten. „Mit Gruppen“ gruppiert Punkte unter Überschriften, „Schwebend“ löst die Sidebar vom Rand für einen leichteren Eindruck.

Halte die Reihenfolge stabil, Menschen navigieren ebenso nach Position wie nach Label. Markiere den aktiven Punkt, die Components setzen aria-current für dich. Icons allein reichen nicht, die eingeklappte Variante behält jedes Label als Tooltip und für Screenreader.

Vollständig

Marke, Suche, Navigation mit Zählern, unten Hilfe und Konto.

Nur Symbole

Eine schmale Leiste mit Beschriftung bei Hover und Fokus, ausklappbar. Telefone bekommen eine Tab-Leiste.

Arbeitsbereich wechseln

Ein Umschalter oben für Teams mit mehreren Arbeitsbereichen, mit Pfeiltasten.

Mit Gruppen

Einklappbare Gruppen für Favoriten, farbige Projekte und verschachtelte Teams.

Schwebend

Eine erhabene Karte neben der Seite mit Verbrauchsanzeige. Telefone bekommen eine schwebende Tab-Leiste.

Details

Was Seitenleiste mitbringt, aus Registry und Quellcode gelesen.

Bereich: Layout
Variants: 5
Version: 1.0.1 · seit 1.0.0
Datei: components/ui/sidebar.tsx
Bringt mit: utilskitbutton icon
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 11 eigene Texte
Studio: Im Code anpassen
In Sammlungen: App-Dashboard
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle SidebarProps aus components/ui/sidebar.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
SidebarVariant
fullcollapsed-iconswith-workspace-switcherwith-sectionsfloating
brandPflicht
{ name: string; href?: string; logo?: React.ReactNode }
itemsPflicht
SidebarItem[]
The main navigation
sectionsoptional
SidebarSection[]
with-sections: groups like Favorites, Projects, Teams
footerItemsoptional
SidebarItem[]
Help, settings and the like, pinned to the bottom
workspacesoptional
Workspace[]
with-workspace-switcher
activeWorkspaceoptional
number
useroptional
{ name: string; email: string }
userMenuoptional
SidebarItem[]
promooptional
{ title: string; description?: string; action?: { label: string; href: string }; progress?: number }
floating: a card at the bottom, e.g. storage or plan usage
mobileoptional
'drawer' | 'tabs'
Phones: a drawer from the left, or a tab bar at the bottom with the first four items
titleoptional
string
Title in the phone top bar instead of the brand
childrenoptional
React.ReactNode
The page next to the sidebar

Eingebaute Texte

Diese Texte schreibt Seitenleiste selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 11 Texte anzeigen

Schlüssel	Englisch	Deutsch
nav	Englisch Sidebar	Deutsch Seitenleiste
open	Englisch Open navigation	Deutsch Navigation öffnen
close	Englisch Close navigation	Deutsch Navigation schließen
collapse	Englisch Collapse sidebar	Deutsch Seitenleiste einklappen
expand	Englisch Expand sidebar	Deutsch Seitenleiste ausklappen
search	Englisch Search	Deutsch Suchen
workspaces	Englisch Workspaces	Deutsch Arbeitsbereiche
newWorkspace	Englisch Create workspace	Deutsch Arbeitsbereich anlegen
account	Englisch Account	Deutsch Konto
more	Englisch More	Deutsch Mehr
toggleSection	Englisch Show or hide	Deutsch Ein- oder ausblenden

Aus dem Quellcode der Component abgeleitet.

Seitenleiste reagiert selbst auf die Tasten Escape, Pfeil hoch, Pfeil runter, Pos1, Ende, Tab und Leertaste.
Setzt aria-checked, aria-controls, aria-current, aria-expanded, aria-haspopup, aria-label, aria-modal, aria-valuemax, aria-valuemin und aria-valuenow, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen dialog, menu, menuitem, menuitemradio und progressbar.
Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
Bewegt sich mit dem Scrollen, der Fortschritt folgt der Position auf der Seite.
Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 8 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Seitenleiste?

Mit aiw add @ai-website/sidebar. Der Befehl legt die Datei components/ui/sidebar.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button und icon. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Seitenleiste?

5 Varianten, Vollständig, Nur Symbole, Arbeitsbereich wechseln, Mit Gruppen und Schwebend. Du wählst sie mit der Prop variant, zum Beispiel variant="collapsed-icons".

Kann ich die Texte von Seitenleiste übersetzen?

Ja. Seitenleiste bringt 11 eigene Texte auf Deutsch und Englisch mit, etwa „Seitenleiste“, „Navigation öffnen“ und „Navigation schließen“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Seitenleiste einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Seitenleiste mit aiw_components und installieren sie mit aiw_add @ai-website/sidebar. Nenn im Prompt die Variante, etwa variant="full", dann schreibt der Assistent deine Inhalte direkt in die Props.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Sidebars stehen.