Zur Navigation Zum Inhalt Kontakt Menu Komponente finden Übersicht Lyne Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Übersicht Basis Informationen Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons
Komponente finden

Lyne

Basics Animation Animation Border Border Grid Grid Spacings Spacings Typografie Typografie Components Accordion Accordion Action-Group Action-Group Alert Alert Alert-Group Alert-Group Autocomplete Autocomplete Breadcrumb Breadcrumb Breadcrumb-Group Breadcrumb-Group Button Button Calendar Calendar Card Card Card-Action Card-Action Card-Badge Card-Badge Checkbox Checkbox Checkbox-Group Checkbox-Group Chip Chip Clock Clock Container Container Datepicker Datepicker Dialog Dialog Divider Divider Expansion-Panel Expansion-Panel File-Selector File-Selector Footer Footer Form-Error Form-Error Form-Field Form-Field Form-Field-Clear Form-Field-Clear Header Header Header-Action Header-Action Icon Icon Image Image Journey-Header Journey-Header Link Link Link-List Link-List Loading-Indicator Loading-Indicator Logo Logo Menu Menu Menu-Action Menu-Action Message Message Navigation Navigation Navigation-Action Navigation-Action Navigation-List Navigation-List Navigation-Marker Navigation-Marker Navigation-Section Navigation-Section Notification Notification Popover Popover Popover-Trigger Popover-Trigger Radio-Button Radio-Button Radio-Button-Group Radio-Button-Group Select Select Selection-Panel Selection-Panel Signet Signet Skiplink-List Skiplink-List Slider Slider Status Status Sticky-Bar Sticky-Bar 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 Toast Toast Toggle Toggle Toggle-Check Toggle-Check
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 Kontakt Cookie Einstellungen