What does the component do?

A menu shows context-dependent actions or options for a defined element. It can be called up by another interactive element like e.g. a button.

When should the component be used?

• To provide users with quick access to frequently used actions or options that are relevant for a specific element.
• When compact and contextualised navigation is required.
• To increase usability by providing additional options directly at the point of action.

Rules

• Menu options should be clearly labelled and easy to understand.
• Make sure that the menu options are logically grouped and arranged in a useful order.
• Avoid too many options in a context menu to ensure clarity and not overwhelm users.

Playground

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 by using the sbb-menu-button
or to navigate within or outside the application by using the sbb-menu-link 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-link icon="link-small" href="https://www.sbb.ch/en">View</sbb-menu-link>
  <sbb-menu-button icon="pen-small">Edit</sbb-menu-button>
  <sbb-menu-button icon="swisspass-small" sbb-badge="12" aria-label="Details, containing 12 items">
    Details
  </sbb-menu-button>
  <sbb-divider></sbb-divider>
  <sbb-menu-button icon="cross-small">Cancel</sbb-menu-button>
</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-block-link href="https://www.sbb.ch/en" size="xs">Profile</sbb-block-link>
  <sbb-divider></sbb-divider>
  <sbb-menu-link icon="link-small" href="https://www.sbb.ch/en">View</sbb-menu-link>
  <sbb-menu-button icon="pen-small">Edit</sbb-menu-button>
  <sbb-menu-button icon="swisspass-small" sbb-badge="12" aria-label="Details, containing 12 items">
    Details
  </sbb-menu-button>
  <sbb-divider></sbb-divider>
  <sbb-menu-button icon="cross-small">Cancel</sbb-menu-button>
</sbb-menu>

Nesting menus

It is possible to create submenus by connecting a menu to a sbb-menu-button/sbb-menu-link
element via trigger property / attribute of the sbb-menu.
On smaller screens, submenus will automatically display a back button to navigate back to the parent menu.

Please note that nesting the menus in DOM is not supported. The sbb-menu elements have to be siblings in order to work.

<sbb-menu>
  <sbb-menu-button icon="pen-small" id="submenu-trigger">Submenu trigger</sbb-menu-button>
</sbb-menu>
<sbb-menu trigger="submenu-trigger">
  <sbb-menu-link icon="link-small" href="https://www.sbb.ch/en">View</sbb-menu-link>
  <sbb-menu-button icon="swisspass-small" sbb-badge="12">Details</sbb-menu-button>
</sbb-menu>

Accessibility

The sbb-menu uses the roles menu and menuitem for children.

As the menu opens, the focus will automatically be set to the first focusable
item within the component (unless manually specified, see below).
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.

It is possible to navigate the slotted sbb-menu-button/sbb-menu-link via keyboard using arrow keys or page keys
(Home, PageUp, End and PageDown).
If the trigger element for a nested menu is focused, ArrowRight will open and focus the submenu;
if the focus is currently on a nested menu, ArrowLeft will close the current menu and go back to the parent menu.

Controlling initial focus

The first element with the attribute sbb-focus-initial will receive focus on opening.
If the attribute is not used, the first focusable element receives focus (recommended).

<sbb-menu>
  <sbb-block-link href="https://www.sbb.ch/en" size="xs">Profile</sbb-block-link>
  <sbb-menu-link sbb-initial-focus icon="link-small" href="https://www.sbb.ch/en">
    Receives initial focus
  </sbb-menu-link>
</sbb-menu>

Disabled menu items

Disabled elements do not receive focus, and they can be problematic for screen reader users. It's preferable if the disabledInteractive property is used, instead.

<sbb-menu>
  ...
  <sbb-menu-button disabled-interactive> Edit </sbb-menu-button>
  ...
</sbb-menu>

Properties

Methods

Events

CSS Properties

Slots