Menu

The Menu item list is a component that allows you to display related content grouped together and organized vertically. It can be used in various UI components such as dropdown, drawer, split button and more.

The structure of the Menu item list consists of list of Menu Item, which contains a Menu Item Label and a Submenu item list. The Submenu item list, in turn, contains a list of Submenu Items.

NOTE: To add functionality to the menu, you will need to write your own JavaScript code as the @qtm/css library only provides CSS for the UI of the menu.

Single level menu

Menu ItemMenu ItemMenu Item

<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

When using menu items with icons, the icon should be positioned on the left side of the menu item label. 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 Iconography documentation.

Menu ItemMenu ItemMenu ItemSubmenu ItemSubmenu ItemSubmenu Item

<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

Add .qtm-active class to style menu items as active. When a submenu item is active, apply the .qtm-active class to both it and its parent menu item to display the active style.

Menu ItemMenu ItemMenu ItemSubmenu ItemSubmenu ItemSubmenu Item

<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

Add .qtm-disabled to a menu item to style it and its children as disabled.

Menu ItemMenu ItemMenu ItemSubmenu ItemSubmenu ItemSubmenu Item

<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 .qtm-collapsed to a menu item to hidden nesting its submenu item list.

Menu ItemMenu ItemMenu ItemSubmenu ItemSubmenu ItemSubmenu Item

<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

You can choose between 3 additional sizes: .qtm-small, .qtm-medium and .qtm-large. By default, a menu item list has medium size.

SmallMenu ItemMenu ItemMenu ItemSubmenu ItemSubmenu ItemSubmenu Item

MediumMenu ItemMenu ItemMenu ItemSubmenu ItemSubmenu ItemSubmenu Item

LargeMenu ItemMenu ItemMenu ItemSubmenu ItemSubmenu ItemSubmenu Item

<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 .qtm-scrollable class 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: 5;">
  ...
</ul>