Skip to main content
HomeComponentsMenu
warning
This is a beta release of the Quantum web libraries
Please be careful when using them in production, as they may contain bugs, unstable breaking changes, and incomplete features.
Go to the latest version

Menu

The Menu is an UI component that displays a list of items vertically. It's commonly used to group related options or actions together. You can use it within various components like Dropdown, Drawer, and Split Button to organize content or actions in a straightforward and accessible way.

The structure of the MenuItemList consists of list of MenuItem, which contains a MenuItemLabel and a SubmenuItemList. The SubmenuItemList, in turn, contains a list of SubmenuItems.

info

To enable interactivity in the menu, you will need to implement your own JavaScript code, as the @qtm/css library provides only the CSS for the menu's visual appearance.

Single level menu​

<ul class="qtm-menu-item-list">
  <li class="qtm-menu-item">
    <a class="qtm-menu-item-label" tabindex="0">
      <i class="material-icons qtm-icon">account_circle</i>
      <span>Menu item</span>
    </a>
  </li>
  <li class="qtm-menu-item">
    <a class="qtm-menu-item-label" tabindex="0">
      <i class="material-icons qtm-icon">account_circle</i>
      <span>Menu item</span>
    </a>
  </li>
  <li class="qtm-menu-item">
    <a class="qtm-menu-item-label" tabindex="0">
      <i class="material-icons qtm-icon">account_circle</i>
      <span>Menu item</span>
    </a>
  </li>
</ul>

Multi level menu​

For menu item with submenu items, a collapsed icon should also be displayed on the right side of menu item label. To select a suitable icon, please refer to the Icon documentation.

<ul class="qtm-menu-item-list">
  <li class="qtm-menu-item">
    <a class="qtm-menu-item-label" tabindex="0">
      <i class="material-icons qtm-icon">account_circle</i>
      <span>Menu item</span>
    </a>
  </li>
  <li class="qtm-menu-item">
    <a class="qtm-menu-item-label" tabindex="0">
      <i class="material-icons qtm-icon">account_circle</i>
      <span>Menu item</span>
    </a>
  </li>
  <li class="qtm-menu-item">
    <a class="qtm-menu-item-label" tabindex="0">
      <i class="material-icons qtm-icon">account_circle</i>
      <span>Menu item</span>
      <i class="material-icons qtm-icon">keyboard_arrow_up</i>
    </a>
    <ul class="qtm-submenu-item-list">
      <li class="qtm-submenu-item" tabindex="0">
        <a><span>Submenu Item</span></a>
      </li>
      <li class="qtm-submenu-item" tabindex="0">
        <a><span>Submenu Item</span></a>
      </li>
      <li class="qtm-submenu-item" tabindex="0">
        <a><span>Submenu Item</span></a>
      </li>
    </ul>
  </li>
</ul>

State​

Active items​

Apply the .qtm-active class to menu items to indicate they are active. If a submenu item is active, add the .qtm-active class to both the submenu item and its parent menu item to visually highlight the active state.

<ul class="qtm-menu-item-list">
  <li class="qtm-menu-item">
    <a class="qtm-menu-item-label" tabindex="0">
      <i class="material-icons qtm-icon">account_circle</i>
      <span>Menu item</span>
    </a>
  </li>
  <li class="qtm-menu-item">
    <a class="qtm-menu-item-label" tabindex="0">
      <i class="material-icons qtm-icon">account_circle</i>
      <span>Menu item</span>
    </a>
  </li>
  <li class="qtm-menu-item qtm-active">
    <a class="qtm-menu-item-label" tabindex="0">
      <i class="material-icons qtm-icon">account_circle</i>
      <span>Menu item</span>
      <i class="material-icons qtm-icon">keyboard_arrow_up</i>
    </a>
    <ul class="qtm-submenu-item-list">
      <li class="qtm-submenu-item qtm-active" tabindex="0">
        <a><span>Submenu Item</span></a>
      </li>
      <li class="qtm-submenu-item" tabindex="0">
        <a><span>Submenu Item</span></a>
      </li>
      <li class="qtm-submenu-item" tabindex="0">
        <a><span>Submenu Item</span></a>
      </li>
    </ul>
  </li>
</ul>

Disabled menu item​

Apply the .qtm-disabled class to a menu item to visually indicate that it, along with its child items, is disabled.

<ul class="qtm-menu-item-list">
  <li class="qtm-menu-item qtm-disabled">
    <a class="qtm-menu-item-label" tabindex="0">
      <i class="material-icons qtm-icon">account_circle</i>
      <span>Menu item</span>
    </a>
  </li>
  <li class="qtm-menu-item">
    <a class="qtm-menu-item-label" tabindex="0">
      <i class="material-icons qtm-icon">account_circle</i>
      <span>Menu item</span>
    </a>
  </li>
  <li class="qtm-menu-item qtm-active qtm-disabled">
    <a class="qtm-menu-item-label" tabindex="0">
      <i class="material-icons qtm-icon">account_circle</i>
      <span>Menu item</span>
      <i class="material-icons qtm-icon">keyboard_arrow_up</i>
    </a>
    <ul class="qtm-submenu-item-list">
      <li class="qtm-submenu-item qtm-active" tabindex="0">
        <a><span>Submenu Item</span></a>
      </li>
      <li class="qtm-submenu-item" tabindex="0">
        <a><span>Submenu Item</span></a>
      </li>
      <li class="qtm-submenu-item" tabindex="0">
        <a><span>Submenu Item</span></a>
      </li>
    </ul>
  </li>
</ul>

Collapsed menu items​

Add the .qtm-collapsed class to a menu item to hide its nested submenu list.

<ul class="qtm-menu-item-list">
  <li class="qtm-menu-item">
    <a class="qtm-menu-item-label" tabindex="0">
      <div class="qtm-icon">
        <i class="material-icons">account_circle</i>
      </div>
      <span>Menu item</span>
    </a>
  </li>
  <li class="qtm-menu-item">
    <a class="qtm-menu-item-label" tabindex="0">
      <div class="qtm-icon">
        <i class="material-icons">account_circle</i>
      </div>
      <span>Menu item</span>
    </a>
  </li>
  <li class="qtm-menu-item qtm-collapsed">
    <a class="qtm-menu-item-label" tabindex="0">
      <div class="qtm-icon">
        <i class="material-icons">account_circle</i>
      </div>
      <span>Menu item</span>
      <div class="qtm-icon">
        <i class="material-icons">keyboard_arrow_down</i>
      </div>
    </a>
    <ul class="qtm-submenu-item-list">
      <li class="qtm-submenu-item" tabindex="0">
        <a><span>Submenu Item</span></a>
      </li>
      <li class="qtm-submenu-item" tabindex="0">
        <a><span>Submenu Item</span></a>
      </li>
      <li class="qtm-submenu-item" tabindex="0">
        <a><span>Submenu Item</span></a>
      </li>
    </ul>
  </li>
</ul>

Sizes​

The menu item lists come in three size: small, medium (default) and large.

Small
Medium
Large
<ul class="qtm-menu-item-list qtm-small">
  ...
</ul>
<ul class="qtm-menu-item-list qtm-medium">
  ...
</ul>
<ul class="qtm-menu-item-list qtm-large">
  ...
</ul>

Scrolling​

If there are more menu items than can be displayed at once, you can make the menu item list scrollable by adding the scrollable attribute to this component. By default, the scrollable menu item list displays the first five menu items and half of the sixth one.

<ul class="qtm-menu-item-list qtm-scrollable">
  ...
</ul>

You can also control the number of visible items by modifying the --nb-visible-items CSS variable:

<ul class="qtm-menu-item-list qtm-scrollable" style="--nb-visible-items: 2">
  ...
</ul>

Spotted a bug, have a question, or want to suggest a new feature?

Submit an issue on GitLab