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
<MenuItemList>
<MenuItem id="menu1">
<MenuItemLabel>
<Icon icon="account_circle"></Icon>
<Typography>Menu Item</Typography>
</MenuItemLabel>
</MenuItem>
<MenuItem id="menu2">
<MenuItemLabel>
<Icon icon="account_circle"></Icon>
<Typography>Menu Item</Typography>
</MenuItemLabel>
</MenuItem>
<MenuItem id="menu3">
<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.
<MenuItemList>
<MenuItem id="menu1">
<MenuItemLabel>
<Icon icon="account_circle"></Icon>
<Typography>Menu Item</Typography>
</MenuItemLabel>
</MenuItem>
<MenuItem id="menu2">
<MenuItemLabel>
<Icon icon="account_circle"></Icon>
<Typography>Menu Item</Typography>
</MenuItemLabel>
</MenuItem>
<MenuItem id="menu3">
<MenuItemLabel>
<Icon icon="account_circle"></Icon>
<Typography>Menu Item</Typography>
<Icon icon="keyboard_arrow_up"></Icon>
</MenuItemLabel>
<SubmenuItemList>
<SubmenuItem id="submenu1">Submenu Item</SubmenuItem>
<SubmenuItem id="submenu2">Submenu Item</SubmenuItem>
<SubmenuItem id="submenu3">Submenu Item</SubmenuItem>
</SubmenuItemList>
</MenuItem>
</MenuItemList>
Using items prop
You can also use the items prop to generate the menu item list dynamically. This prop has the following format:
type MenuItemType = {
label: string,
id: string,
icon?: string | IconType,
children?: [
{
label: string,
id: string,
}
],
};
Single level menu
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' /> },
]
<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.
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 = {
icon: string,
classes?: string,
lib?: IconLibType,
size?: IconSizeType,
variant?: IconVariantType,
};
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>
Properties
All the properties listed below can be applied directly to the menu item list tag. This means that they are applicable to the menu item list generated by using either the slot or the items prop method.
NOTE: All menu item element and submenu item element must have an id attribute for the features to work properly.
Active
enableAutoActive
Setting the enableAutoActive prop to true will automatically activate the active state of both menu items and submenu items when they are clicked or when the activeId prop value is changed.
const items=[{label: "Menu item", id: "menu1", icon: <Icon icon='account_circle' />,...]
<MenuItemList items={itemsProp} enableAutoActive></MenuItemList>
activeId
Set the activeId value to the active menu or submenu item ID by default
const items=[{label: "Menu item", id: "menu1", icon: <Icon icon='account_circle' />,...]
<MenuItemList items={items} activeId="menu2" enableAutoActive></MenuItemList>
disabledIds
Set the disabledIds value to a list of ids of disabled menu items or disabled submenu items
<MenuItemList
items={itemsProp}
disabledIds={['menu1', 'submenu2']}
enableAutoActive
></MenuItemList>
collapsedIds
Set the collapsedIds value to a list of menu items that does not show their own nested submenu items by default
const items=[{label: "Menu item", id: "menu1", icon: <Icon icon='account_circle' />,...]
<MenuItemList items={items} collapsedIds={['menu3']}></MenuItemList>
size
The menu item lists come in three size: small, medium and large. By default, they are displayed in the medium size.
Small
Medium
Large
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.
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.
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).
const items=[{label: "Menu item", id: "menu1", icon: <Icon icon='account_circle' />,...]
<MenuItemList items={items} classes="bg-primary-100"></MenuItemList>