Menu items must have a value, and can have a label to display in the UI. If no label is provided (like the third menu item in this example), the value will be displayed.
Items are displayed via the MenuItem component—see the MenuItem docs for more options. In this example, a menuConfig object is passed to the Select to bold the label text and hide the text overflow of the descriptions.
Choose an option
Cameraoptical device for recording or transmitting photographic images or videos
Bookwritten text that can be published in printed or electronic form
Clockinstrument that measures the passage of time
<template><cdx-selectv-model:selected="selection":menu-items="menuItems":menu-config="menuConfig"default-label="Choose an option"/></template><scriptlang="ts">import{ defineComponent }from'vue';import{ CdxSelect, MenuItemData }from'@wikimedia/codex';import{ cdxIconCamera, cdxIconBook, cdxIconClock }from'@wikimedia/codex-icons';constmenuItems: MenuItemData[]=[{value:'camera',label:'Camera',description:'optical device for recording or transmitting photographic images or videos',icon: cdxIconCamera
},{value:'book',label:'Book',description:'written text that can be published in printed or electronic form',icon: cdxIconBook
},{value:'clock',label:'Clock',description:'instrument that measures the passage of time',icon: cdxIconClock
}];exportdefaultdefineComponent({name:'SelectComplexMenuItems',components:{ CdxSelect },data(){return{
menuItems,selection:null,menuConfig:{boldLabel:true,hideDescriptionOverflow:true}};}});</script>
The menu-item scoped slot enables you to customize the display of each menu item, with a binding for the menuItem. In this example, only the menu item's icon is displayed in the menu.