Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs supplémentaires Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Aperçu Releases Design Tokens Composants Aperçu Base Informations Aperçu Base Composants Aperçu Power-Apps Bandeaux publicitaires numériques SAP IA Design : Bases Icônes d’applications Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles: Deutsch English 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

Darstellung der Sidebar, Plain Variante


  • 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

Darstellung der Sidebar, Icon Variante


  • 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.

Diese Variante hat folgende Zustände:

  • Collapsed
  • Expanded

Darstellung der Sidebar, Submenu Variante


  • 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

DesignCode
Contact

Vous avez des questions ? Vous trouverez peut-être une réponse dans notre FAQ ou notre aide, sinon vous pouvez poser votre question sur le board correspondant sur Github.

Impressum Contact Protection des données Paramètres des cookies