Die MarkeLink target opens in a new window. SBB Markenportal Logo Digitale Uhr NutzungsrechteFarben Basis-Farben Zusätzliche Farben Off-Brand FarbenAssets Icons Fahrplan-Icons PiktogrammeSprache Über UX Writing Button- und Linktexte Benachrichtigungen Formulare und Eingaben Fortschrittsanzeige Digitale Wörterliste
Einführung Über Barrierefreiheit Über diesen Guide Kontakt Weitere InformationenRollen Product Owner User Research Interaction Design Visual Design Development Content Design Testing
Erste Schritte Was ist ein Design System? Designing Coding FAQ HilfeOrganisation Prozess Contribution KontaktMobile Übersicht Basis KomponentenLyne Übersicht Was ist Lyne? Releases Presets & Themes Design Tokens Komponenten TemplatesMaps Übersicht Basis InformationenPatterns Übersicht
Guides Power-Apps Digitale Werbebanner SAP AI Design: GrundlagenVorschriften App Icons
Sidebar.
Übersicht
Was macht die Komponente?
Bietet die Möglichkeit eines direkten Zugriffs auf Inhalte und Funktionen von Anwendungen bzw. Anwendungsteilen.
Wann soll die Komponente eingesetzt werden?
Zur Strukturierung und direkten Navigation auf Inhalte und Funktionen.
Regeln
Verhalten
Bei grossen Screens (Desktop und grösser) wird beim Ausklappen der Sidebar der Contentbereich in der Breite verkleinert. Bei kleineren Screens (Tablet, Mobile) wird der Content überdeckt durch die ausgeklappte Sidebar.
Layout
Die Höhe der Navigationsleiste entspricht der Höhe des kompletten Contentbereichs.
Varianten
Varianten
Plain
Diese Variante hat folgende Zustände:
Default
Die Menüeinträge können in Kategorien / Bereiche gegliedert werden.
Bei den Kategorien kann beim Einsatz der Sidebar zwischen Accordion und Fieldset gewählt werden.
Iconleiste
Diese Variante hat folgende Zustände:
Collapsed
Collapsed Hover
Expanded
Expanded Hover
Der Defaultzustand (collapsed, expanded) kann pro Anwendung festgelegt werden.
Bei Bedarf können die Navigationspunkte mittels Trennlinien visuell gruppiert werden.
Per Default soll der erste (der oberste) Navigationspunkt aktiv sein.
Submenu
Diese Variante hat folgende Zustände:
Collapsed
Expanded
Der Defaultzustand (collapsed, expanded) kann pro Anwendung festgelegt werden.
Die Menüeinträge können in Kategorien / Bereiche gegliedert werden.
Bei den Kategorien kann beim Einsatz der Sidebar zwischen Accordion und Fieldset gewählt werden.
Spezifikationen
Link target opens in a new window.DesignLink target opens in a new window.Code