Menu
Menu
This component is used to display options in a floating panel.
Usage
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.
Menu Position
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:
Close Target
Any element with the slot="close-target"
attribute inside the menu on press will close the menu:
Menu Items
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:
Submenus
Menu components can be nested inside each other to create submenus like so:
Styling
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:
Tailwind
Component API
Props
Name | Type |
---|---|
|
MenuPosition
|
Events
Name | Type |
---|---|
|
MenuOpenEvent
|
|
MenuCloseEvent
|
Name | Description |
---|
CSS VarsLearn more about cssVars
Name | Type |
---|
CSS PartsLearn more about cssParts
Name | Description |
---|
Instance Props
Name | Type |
---|
Instance Methods
Name | Type |
---|---|
|
(trigger?: Event) => void
|
|
(trigger?: Event) => void
|