1. Menu
  2. Menu



This component is used to display options in a floating panel.


Menu components consist of an accessible button <media-menu-button> and floating panel of items <media-menu-items> with complete keyboard support. Menus can be used to display player settings or auxiliary options to the user. Other menus such as <media-quality-menu> and <media-captions-menu> extend these menu components with additional features.

The menu will be displayed as a popup menu from the bottom of the screen on mobile (<480px viewport width), or if a coarse pointer device (e.g., touch) input is detected and orientation is landscape.


When using the default styles, the menu can be positioned using the position property like so:


Valid position values include: top, bottom, top left, and bottom left.

Button Slots

The menu button accepts an open and close slot for displaying content when the respective menu state is active:


Button Tooltip

Tooltips can be provided like so:


Rotate Icon

The data-rotate attribute can be added to an icon so it rotates when the menu button is pressed:


You can configure the rotation degrees using CSS like so:

        media-menu {
  --media-menu-button-icon-rotate-deg: 90deg;


Close Target

Any element with the slot="close-target" attribute inside the menu on press will close the menu:


Menu items are generally radio groups or submenus (nested <media-menu> components). However, you can provide other types of menu items such as links by setting the role="menuitem" and tabindex="-1" attribute on elements like so:


Menu components can be nested inside each other to create submenus like so:



        /* Apply styles to menu container. */
media-menu {

/* Apply styles to menu button when open. */
media-menu-button[aria-expanded='true'] {

/* Apply styles to menu floating panel when open. */
media-menu-items[aria-hidden='false'] {

/* Apply styles to submenus. */
media-menu-items[data-submenu] {

/* Apply styles to submenu when it's open. */
media-menu-items[data-submenu][aria-hidden='false'] {

/* Apply styles to menu items and radios. */
media-menu [role='menuitem'],
media-menu [role='menuitemradio'] {

/* Apply styles to checked radio items. */
media-menu [role='menuitemradio'][aria-checked='true'] {
media-menu [role='menuitemradio'][aria-checked='true'] [part='check'] {



        media-menu {
  /* Style menu item focus ring. */
  --media-focus-ring: 0 0 0 3px rgb(78 156 246);

/* Apply styles to focused menu button. */
media-menu-button[data-focus] {

/* Apply styles to focused menu items. */
media-menu [role='menuitem'][data-focus],
media-menu [role='menuitemradio'][data-focus] {


CSS Variables

The following snippet contains a complete list of CSS variables and their default values. Any of the variables can be set to adjust the default menu styles:

        media-player {
  --media-menu-bg: rgb(10 10 10 / 0.95);
  --media-menu-padding: 10px;
  --media-menu-border-radius: 8px;
  --media-menu-font-size: 15px;
  --media-menu-font-weight: 500;
  --media-menu-scrollbar-track-bg: rgb(245 245 245 / 0.08);
  --media-menu-scrollbar-thumb-bg: rgb(245 245 245 / 0.1);
  --media-menu-x-offset: 0;
  --media-menu-y-offset: unset;
  --media-menu-hint-color: rgba(245, 245, 245, 0.5);
  --media-menu-min-width: 260px;
  --media-menu-max-height: calc(var(--media-height) * 0.7);
  --media-menu-box-shadow: 1px 1px 1px rgb(10 10 10 / 0.5);

  --media-menu-button-icon-rotate-deg: 90deg;

  --media-menu-divider: 1px solid rgb(245 245 245 /0.15);

  --media-menu-mobile-max-height: 40vh;
  --media-menu-mobile-landscape-max-height: 70vh;

  /* menu items */
  --media-menu-item-color: #f5f5f5;
  --media-menu-item-border-radius: 2px;
  --media-menu-item-padding: 12px;
  --media-menu-item-mobile-padding: 12px;
  --media-menu-item-hover-bg: rgb(245 245 245 / 0.08);
  --media-menu-item-icon-size: 22px;

  /* radios */
  --media-menu-radio-check-size: 10px;
  --media-menu-radio-check-inner-size: 4px;
  --media-menu-radio-check-border: 2px solid rgb(245 245 245 / 0.5);
  --media-menu-radio-check-active-color: #f5f5f5;
  --media-menu-radio-check-active-border: 2px solid #f5f5f5;




Component API


Name Type




Name Type




Name Description
Name Type
Name Description

Instance Props

Name Type

Instance Methods

Name Type


(trigger?: Event) => void


(trigger?: Event) => void