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.

There are two ways to use this component: using children or using items prop

Using Children

You can use children to add menu items and submenu items components inside a menu item list component. This gives you greater control over the layout and content of the menu item list.

Single level menu

account_circle

Menu Item

account_circle

Menu Item

account_circle

Menu Item

<MenuItemList>
  <MenuItem id="menu-item-1">
    <MenuItemLabel>
      <Icon icon="account_circle"></Icon>
      <Typography>Menu Item</Typography>
    </MenuItemLabel>
  </MenuItem>
  <MenuItem id="menu-item-2">
    <MenuItemLabel>
      <Icon icon="account_circle"></Icon>
      <Typography>Menu Item</Typography>
    </MenuItemLabel>
  </MenuItem>
  <MenuItem id="menu-item-3">
    <MenuItemLabel>
      <Icon icon="account_circle"></Icon>
      <Typography>Menu Item</Typography>
    </MenuItemLabel>
  </MenuItem>
</MenuItemList>

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.

account_circle

Menu Item

expand_less

Submenu Item

Submenu Item

Submenu Item

<MenuItem active id="menu-item-1">
  <MenuItemLabel>
    <Icon icon="account_circle"></Icon>
    <Typography>Menu Item</Typography>
    <Icon icon="expand_less"></Icon>
  </MenuItemLabel>
  <SubmenuItemList>
    <SubmenuItem id="submenu-item-1">Submenu Item</SubmenuItem>
    <SubmenuItem id="submenu-item-2">Submenu Item</SubmenuItem>
    <SubmenuItem id="submenu-item-3">Submenu Item</SubmenuItem>
  </SubmenuItemList>
</MenuItem>

Using items prop

You can also use the items prop to generate the menu item list dynamically. This prop has the following format:

type MenuItemItemType = {
  label: string,
  id: string,
  icon?: string | IconType,
  children?: [
    {
      label: string,
      id: string,
    },
  ],
};

Single level menu

account_circle

Menu item

account_circle

Menu item

account_circle

Menu item

Submenu item

Submenu item

Submenu item

const items = [
  { label: 'Menu item', id: 'menu1', icon: <Icon icon="account_circle" /> },
  { label: 'Menu item', id: 'menu2', icon: <Icon icon="account_circle" /> },
  {
    label: 'Menu item',
    id: 'menu3',
    icon: <Icon icon="account_circle" />,
    children: [
      { label: 'Submenu item', id: 'submenu1' },
      { label: 'Submenu item', id: 'submenu2' },
      { label: 'Submenu item', id: 'submenu3' },
    ],
  },
];

<MenuItemList items={items}></MenuItemList>;

Multi-level menu

For menu items that contain submenu items, a collapsed icon will be automatically displayed on the right side of the menu label. When a menu item with a submenu is clicked, the icon will dynamically expand or collapse.

account_circle

Menu item

account_circle

Menu item

account_circle

Menu item

Submenu item

Submenu item

Submenu item

const items=[
  {label: "Menu item", id: "menu1", icon: <Icon icon="account_circle" />},
  {label: "Menu item", id: "menu2", icon: <Icon icon="account_circle" />},
  {
    label: "Menu item", id: "menu3", icon: <Icon icon="account_circle" />,
    children: [
      { label: 'Submenu item', id: 'submenu1' },
      { label: 'Submenu item', id: 'submenu2' },
      { label: 'Submenu item', id: 'submenu3' },
    ],
  },
]
<MenuItemList items={items}></MenuItemList>

Multi-level menu with custom icon

To select an appropriate icon, please consult the Icon component documentation.

You can include an icon in the items prop by adding either the icon name or an icon object with the following format:

type IconType = string | React.ReactElement;

Menu item

Menu item

Menu item

Submenu item

Submenu item

Submenu item

const items=[
  {label: "Menu item", id: "menu1", icon: <Icon icon="applied_settings" lib="business" />},
  {label: "Menu item", id: "menu2", icon: <Icon icon="applied_settings" lib="business" />},
  {
    label: "Menu item", id: "menu3", icon: <Icon icon="applied_settings" lib="business" />,
    children: [
      { label: 'Submenu item', id: 'submenu1' },
      { label: 'Submenu item', id: 'submenu2' },
      { label: 'Submenu item', id: 'submenu3' },
    ],
  },
]
<MenuItemList items={items}></MenuItemList>

Sizes

Menu item list are available in three sizes: small, medium and large. You can use the attribute size to control height and padding of menu item list.

Small

account_circle

Menu item

account_circle

Menu item

account_circle

Menu item

Submenu item

Submenu item

Submenu item

Medium

account_circle

Menu item

account_circle

Menu item

account_circle

Menu item

Submenu item

Submenu item

Submenu item

Large

account_circle

Menu item

account_circle

Menu item

account_circle

Menu item

Submenu item

Submenu item

Submenu item

const items=[{label: "Menu item", id: "menu1", icon: <Icon icon="account_circle" />},...]
<MenuItemList size="small" items={items}></MenuItemList>
<MenuItemList size="medium" items={items}></MenuItemList>
<MenuItemList size="large" items={items}></MenuItemList>

Scrolling

scrollable

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.

account_circle

Menu item

account_circle

Menu item

account_circle

Menu item

account_circle

Menu item

account_circle

Menu item

account_circle

Menu item

account_circle

Menu item

account_circle

Menu item

const items=[{label: "Menu item", id: "menu1", icon: <Icon icon="account_circle" />},...]
<MenuItemList items={items} scrollable></MenuItemList>

nbVisibleItems

If you want to change the number of visible items when the menu item list is scrollable, you can change value of nbVisibleItems attribute.

account_circle

Menu item

account_circle

Menu item

account_circle

Menu item

account_circle

Menu item

account_circle

Menu item

account_circle

Menu item

account_circle

Menu item

account_circle

Menu item

const items=[{label: "Menu item", id: "menu1", icon: <Icon icon="account_circle" />},...]
<MenuItemList items={items} scrollable nbVisibleItems={2}></MenuItemList>

classes

Add your own classes in the classes attribute. This way you will be able to override or extend the styles applied to the component (you can use available utility classes by importing @qtm/css/dist/utilities.css).

account_circle

Menu item

account_circle

Menu item

account_circle

Menu item

const items=[{label: "Menu item", id: "menu1", icon: <Icon icon="account_circle" />},...]
<MenuItemList items={items} classes="bg-primary-100"></MenuItemList>

Event handling

The MenuItemList component provides several event handlers to manage user interactions:

onClickItem

Triggered when a menu item or submenu item is clicked. The callback receives the ID of the clicked item.

const handleItemClick = (id) => {
  console.log(`Item clicked: ${id}`);
  // Your logic here
};

<MenuItemList 
  items={itemsProp} 
  onClickItem={handleItemClick}
/>

onActiveIdChanged

Triggered when the active item changes. The callback receives the ID of the newly active item.

const handleActiveChange = (id) => {
  console.log(`Active item changed to: ${id}`);
  // Your logic here
};

<MenuItemList 
  items={itemsProp} 
  onActiveIdChanged={handleActiveChange}
/>

onCollapsedIdsChanged

Triggered when a menu item with submenu items is expanded or collapsed. The callback receives an array of IDs of all currently collapsed menu items.

const handleCollapsedChange = (collapsedIds) => {
  console.log('Currently collapsed items:', collapsedIds);
  // Your logic here
};

<MenuItemList 
  items={itemsProp} 
  onCollapsedIdsChanged={handleCollapsedChange}
/>

API

QtmMenuItemList

Property	Type	Default	Description
activeId	string		The item whose id is activeId will activate when enableAutoActive is set to true
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
collapsedIds	string[]	[]	The list of collapsed menu-item ids, only if they have submenu-items
disabledIds	string[]	[]	The list of disabled menu-item ids and disabled submenu items ids
enableAutoActive	boolean	false	If true, the menu item list activates automatically the active state of menu item and submenu item. The elements in list must have id attribute
items	MenuItemItemType[]		List of items to be generated as children nodes, ex: [{ label: 'label1', icon: 'person', id: 'id1', children: [ { label: 'subLabel'; id: 'subId1'; }, ... ]
nbVisibleItems	number		the number of visible items when the menu item list is scrollable
scrollable	boolean	false	if true, the menu item list is scrollable
size	"large" | "medium" | "small"		The size of child elements( menu-item, menu-item-label, submenu-item) in menu-item-list

Event	Type	Description
onActiveIdChanged	CustomEvent<string>	Callback fired when the activeId is modified
onClickItem	CustomEvent<string>	Callback fired when a menu item or submenu item is clicked
onCollapsedIdsChanged	CustomEvent<string[]>	Callback fired when collapsed id list change

QtmMenuItem

Property	Type	Default	Description
active	boolean	false	If true, the menu item or submenu item is active
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
collapsed	boolean	false	If true, the submenu item list is collapsed
disabled	boolean	false	If true, the component is disabled.
id	string		The id of menu item
item	{ label: string; icon?: string | IconType; id: string; children?: [{ label: string; id: string; }]; }

Event	Type	Description
onClickedMenuItem	CustomEvent<string>	Callback fired when the menu item is clicked or when its submenu-item is clicked

QtmMenuItemLabel

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing

Event	Type	Description
onClickEvent	CustomEvent<void>	callback fired when a menu item label is clicked

QtmSubmenuItemList

Property	Type	Default	Description
classes	string

QtmSubmenuItem

Property	Type	Default	Description
active	boolean		If true, the menu item or submenu item is active
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabled	boolean	false	If true, the component is disabled.
id	string		The id of submenu item

Event	Type	Description
onClickedSubmenuItem	CustomEvent<string>	Callback fired when when its submenu-item is clicked