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 slot or using items property
Using Slot
You can use slots 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
<qtm-menu-item-list>
<qtm-menu-item id="menu1">
<qtm-menu-item-label>
<qtm-icon icon="account_circle"></qtm-icon>
<qtm-typography>Menu Item</qtm-typography>
</qtm-menu-item-label>
</qtm-menu-item>
<qtm-menu-item id="menu2">
<qtm-menu-item-label>
<qtm-icon icon="account_circle"></qtm-icon>
<qtm-typography>Menu Item</qtm-typography>
</qtm-menu-item-label>
</qtm-menu-item>
<qtm-menu-item id="menu3">
<qtm-menu-item-label>
<qtm-icon icon="account_circle"></qtm-icon>
<qtm-typography>Menu Item</qtm-typography>
</qtm-menu-item-label>
</qtm-menu-item>
</qtm-menu-item-list>
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.
<qtm-menu-item-list>
<qtm-menu-item id="menu1">
<qtm-menu-item-label>
<qtm-icon icon="account_circle"></qtm-icon>
<qtm-typography>Menu Item</qtm-typography>
</qtm-menu-item-label>
</qtm-menu-item>
<qtm-menu-item id="menu2">
<qtm-menu-item-label>
<qtm-icon icon="account_circle"></qtm-icon>
<qtm-typography>Menu Item</qtm-typography>
</qtm-menu-item-label>
</qtm-menu-item>
<qtm-menu-item id="menu3">
<qtm-menu-item-label>
<qtm-icon icon="account_circle"></qtm-icon>
<qtm-typography>Menu Item</qtm-typography>
<qtm-icon icon="keyboard_arrow_up"></qtm-icon>
</qtm-menu-item-label>
<qtm-submenu-item-list>
<qtm-submenu-item id="submenu1">Submenu Item</qtm-submenu-item>
<qtm-submenu-item id="submenu2">Submenu Item</qtm-submenu-item>
<qtm-submenu-item id="submenu3">Submenu Item</qtm-submenu-item>
</qtm-submenu-item-list>
</qtm-menu-item>
</qtm-menu-item-list>
Using items property
You can also set the items property value in Javascript in order to generate the menu item list dynamically. This property has the following format:
type MenuItemItemType = {
label: string,
id: string,
icon?: string | IconType,
children?: [
{
label: string,
id: string,
}
],
};
Single level menu
<script>
const items=[
{ label: 'Menu item', id: 'menu1', icon: 'account_circle' },
{ label: 'Menu item', id: 'menu2', icon: 'account_circle' },
{ label: 'Menu item', id: 'menu3', icon: 'account_circle' },
]
document.getElementById("menu-list").items = items
</script>
<qtm-menu-item-list id="menu-list"></qtm-menu-item-list>
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.
<script>
const items=[
{label: "Menu item", id: "menu1", icon: "account_circle"},
{label: "Menu item", id: "menu2", icon: "account_circle"},
{
label: "Menu item", id: "menu3", icon: "account_circle",
children: [
{ label: 'Submenu item', id: 'submenu1' },
{ label: 'Submenu item', id: 'submenu2' },
{ label: 'Submenu item', id: 'submenu3' },
],
},
]
document.getElementById("menu-list").items = items
</script>
<qtm-menu-item-list id="menu-list"></qtm-menu-item-list>
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 property 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,
};
<script>
const items=[
{label: "Menu item", id: "menu1", icon: {icon: 'applied_settings', lib:"business"}},
{label: "Menu item", id: "menu2", icon: {icon: 'applied_settings', lib:"business"}},
{
label: "Menu item", id: "menu3",
icon: { icon: 'applied_settings', lib:"business"}
children: [
{ label: 'Submenu item', id: 'submenu1' },
{ label: 'Submenu item', id: 'submenu2' },
{ label: 'Submenu item', id: 'submenu3' },
],
},
]
document.getElementById("menu-list").items = items
</script>
<qtm-menu-item-list id="menu-list"></qtm-menu-item-list>
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
enable-auto-active
Setting the enable-auto-active
property to true will automatically activate the active state of both menu items and submenu items when they are clicked or when the active-id prop value is changed.
</script>
const items=[{label: "Menu item", id: "menu1", icon: "account_circle"},...]
document.getElementById("menu-list").items = items
</script>
<qtm-menu-item-list id="menu-list" enable-auto-active></qtm-menu-item-list>
active-id
Set the active-id
value to the active menu or submenu item ID by default
</script>
const items=[{label: "Menu item", id: "menu1", icon: "account_circle"},...]
document.getElementById("menu-list").items = items
</script>
<qtm-menu-item-list id="menu-list" active-id="menu2" enable-auto-active></qtm-menu-item-list>
disabledIds
Set the disabledIds
value to a list of ids of disabled menu items or disabled submenu items
</script>
const menu = document.getElementById("menu-list")
const items=[{label: "Menu item", id: "menu1", icon: "account_circle"},...]
menu.items = items
const disabledIds=['menu1', 'submenu2']
menu.disabledIds = disabledIds
</script>
<qtm-menu-item-list id="menu-list" active-id="menu2" enable-auto-active></qtm-menu-item-list>
collapsedIds
Set the collapsedIds
value to a list of menu items that does not show their own nested submenu items by default
</script>
const menu = document.getElementById("menu-list")
const items=[{label: "Menu item", id: "menu1", icon: "account_circle"},...]
menu.items = items
const collapsedIds = ['menu3']
menu.collapsedIds = collapsedIds
</script>
<qtm-menu-item-list id="menu-list"></qtm-menu-item-list>
size
The menu item lists come in three size: small
, medium
and large
. By default, they are displayed in the medium
size.
const items=[{label: "Menu item", id: "menu1", icon: "account_circle"},...]
<qtm-menu-item-list size="small" [items]="items"></qtm-menu-item-list>
<qtm-menu-item-list size="medium" [items]="items"></qtm-menu-item-list>
<qtm-menu-item-list size="large" [items]="items"></qtm-menu-item-list>
</script>
const items=[{label: "Menu item", id: "menu1", icon: "account_circle"},...]
["menu-list1", "menu-list2", "menu-list3"].forEach(listId =>
document.getElementById(listId).items = items
)
</script>
<qtm-menu-item-list id="menu-list1" size="small"></qtm-menu-item-list>
<qtm-menu-item-list id="menu-list2" size="medium"></qtm-menu-item-list>
<qtm-menu-item-list id="menu-list3" size="large"></qtm-menu-item-list>
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.
</script>
const items=[{label: "Menu item", id: "menu1", icon: "account_circle"},...]
document.getElementById("menu-list").items = items
</script>
<qtm-menu-item-list id="menu-list" scrollable></qtm-menu-item-list>
nb-visible-items
If you want to change the number of visible items when the menu item list is scrollable, you can change value of nb-visible-items
attribute.
</script>
const items=[{label: "Menu item", id: "menu1", icon: "account_circle"},...]
document.getElementById("menu-list").items = items
</script>
<qtm-menu-item-list id="menu-list" scrollable nb-visible-items="2"></qtm-menu-item-list>
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).
</script>
const items=[{label: "Menu item", id: "menu1", icon: "account_circle"},...]
document.getElementById("menu-list").items = items
</script>
<qtm-menu-item-list id="menu-list" classes="bg-primary-100"></qtm-menu-item-list>
API
qtm-menu-item-list
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 |
---|---|---|
activeIdChanged | CustomEvent<string> | Callback fired when the activeId is modified |
clickItem | CustomEvent<string> | Callback fired when a menu item or submenu item is clicked |
collapsedIdsChanged | CustomEvent<string[]> | Callback fired when collapsed id list change |
qtm-menu-item
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 |
---|---|---|
clickedMenuItem | CustomEvent<string> | Callback fired when the menu item is clicked or when its submenu-item is clicked |
qtm-menu-item-label
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 |
---|---|---|
clickEvent | CustomEvent<void> | callback fired when a menu item label is clicked |
qtm-submenu-item-list
Property | Type | Default | Description |
---|---|---|---|
classes | string |
qtm-submenu-item
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 |
---|---|---|
clickedSubmenuItem | CustomEvent<string> | Callback fired when when its submenu-item is clicked |