Zur Navigation Zum Inhalt Kontakt Menu Trouver un composant Aperçu Lyne 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 fonctionnelles 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 Base Composants Aperçu Base Composants Aperçu Design Tokens Composants Releases Aperçu Base Informations Sens & objectif Community Assets Instructions Power-Apps Bandeaux publicitaires numériques SAP Icônes d’applications
Trouver un composant

Lyne

Basics Animation Animation Border Border Grid Grid Spacings Spacings Typografie Typografie Components Action-Group Action-Group Alert Alert Alert-Group Alert-Group Autocomplete Autocomplete Button Button Calendar Calendar Card Card Card-Badge Card-Badge Checkbox Checkbox Checkbox-Group Checkbox-Group Chip Chip Clock Clock Datepicker Datepicker Dialog Dialog Divider Divider Footer Footer Form-Error Form-Error Form-Field Form-Field Header Header Header-Action Header-Action Icon Icon Image Image Journey-Header Journey-Header Link Link Link-List Link-List Logo Logo Menu Menu Menu-Action Menu-Action Tooltip Tooltip Tooltip-Trigger Tooltip-Trigger Radio-Button Radio-Button Radio-Button-Group Radio-Button-Group Selection-Panel Selection-Panel Signet Signet Slider Slider Tab-Group Tab-Group Tab Title Tab Title Tag Tag Tag-Group Tag-Group Teaser Teaser Teaser-Hero Teaser-Hero Time-Input Time-Input Title Title Toggle Toggle Toggle-Check Toggle-Check
Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles Deutsch English Menu Implementation

The sbb-menu is a component that can be attached to any element to open and display a custom context menu,
which allows to perform actions relevant to the current task or to navigate within or outside the application
by using the sbb-menu-action component along with it.

Interactions

The element that will trigger the menu dialog must be set using the trigger property.

The sbb-menu appears on trigger left click, and it is displayed as a sheet with a backdrop on mobile,
while on desktop it will be shown as a floating menu, and it will calculate the optimal position relative to the trigger element
by evaluating the available space with the following priority: start/below, start/above, end/below, end/above.

Clicking in the backdrop or pressing the ESC key closes the menu.

<!-- Trigger element -->
<sbb-button id="menu-trigger">Menu trigger</sbb-button>

<!-- Menu component with menu actions -->
<sbb-menu trigger="menu-trigger">
  <sbb-menu-action icon="link-small" href="https://www.sbb.ch/en">View</sbb-menu-action>
  <sbb-menu-action icon="pen-small">Edit</sbb-menu-action>
  <sbb-menu-action icon="swisspass-small" amount="123">Details</sbb-menu-action>
  <sbb-divider></sbb-divider>
  <sbb-menu-action icon="cross-small">Cancel</sbb-menu-action>
</sbb-menu>

You can also provide custom content inside the sbb-menu:

<!-- Trigger element -->
<sbb-button id="menu-trigger">Menu trigger</sbb-button>

<!-- Menu component with custom content and menu actions -->
<sbb-menu trigger="menu-trigger">
  <div>Christina Müller</div>
  <span>UIS9057</span>
  <sbb-link href="https://www.sbb.ch/en" negative size="xs" variant="block">Profile</sbb-link>
  <sbb-divider></sbb-divider>
  <sbb-menu-action icon="link-small" href="https://www.sbb.ch/en">View</sbb-menu-action>
  <sbb-menu-action icon="pen-small">Edit</sbb-menu-action>
  <sbb-menu-action icon="swisspass-small" amount="123">Details</sbb-menu-action>
  <sbb-divider></sbb-divider>
  <sbb-menu-action icon="cross-small">Cancel</sbb-menu-action>
</sbb-menu>

Style

If only sbb-menu-action components are provided, the items are automatically grouped within a list
using <ul> and <li> items, for more complex scenarios the grouping must be done manually.

The default z-index of the component is set to 1000;
to specify a custom stack order, the z-index can be changed by defining the CSS variable --sbb-menu-z-index.

Accessibility

As the menu opens, the focus will automatically be set to the first focusable item within the component.
When using the sbb-menu as a select (e.g. language selection) it's recommended to use the aria-pressed attribute
to identify which actions are active and which are not.

Properties

Name Attribute Privacy Type Default Description
trigger trigger public string | HTMLElement | null null The element that will trigger the menu overlay. Accepts both a string (id of an element) or an HTML element.
disableAnimation disable-animation public boolean false Whether the animation is enabled.
listAccessibilityLabel list-accessibility-label public string | undefined This will be forwarded as aria-label to the inner list. Used only if the menu automatically renders the actions inside as a list.

Methods

Name Privacy Description Parameters Return Inherited From
open public Opens the menu on trigger click. void
close public Closes the menu. void

Events

Name Type Description Inherited From
willOpen CustomEvent<void> Emits whenever the sbb-menu starts the opening transition. Can be canceled.
didOpen CustomEvent<void> Emits whenever the sbb-menu is opened.
willClose CustomEvent<void> Emits whenever the sbb-menu begins the closing transition. Can be canceled.
didClose CustomEvent<void> Emits whenever the sbb-menu is closed.

Slots

Name Description
Use the unnamed slot to add sbb-menu-action or other elements to the menu.
Demo
Menu trigger
Christina Müller
UIS9057ProfileViewTicketsCartLog Out
Hintergrund White Milk Iron Charcoal Black
Beispiele Default
List
Custom Content
Long Content
Ellipsis
HTML-Markup kopiert.
Impressum Contact Paramètres des cookies