Menu
Application menu that provides access to a set of functionalities.
Projects /
Projects /
Application menu that provides access to a set of functionalities.
The menu component is used to reveal a set of functionalities. Its visibility is triggered by a control element (e.g., <button>).
To connect the control with the menu, make sure the aria-controls value of the control is equal to the menu id value.
The vertical gap between the menu element and its control (e.g., <button>) is set using the --menu-vertical-gap CSS custom property (deafult value is 4px).
The menu component is viewport aware: its position, relative to the trigger element, is automatically updated based on the available space.
When the menu element is open, the .menu-control--active class is added to its control element.
When the user starts scrolling the page, any visible menu element is closed.
By default, the window is the element generating the vertical scrollbar. If you have a different scrollable element in your page (e.g., an element that has an overflow set to scroll) and you want the menu to close when this element is scrolled, you can use the data-scrollable-element attribute to pass the CSS selector of the scrollable element.
<menu id="menu-example" class="menu js-menu" data-scrollable-element="#scrollable-element">
<!-- menu content here -->
</menu>
