A value must be provided, and various optional elements can be displayed:
A human-readable label
A description
A thumbnail or icon
Alternately, the entire content and layout of the menu item can be customized via the default slot.
For search results, the search query can be visually differentiated within the result title.
WARNING
This is not a standalone component, nor will it typically be directly used. It's intended for use by the Menu component, which will provide it with props and menu state information. See Menu for more details.
Note that these demos do not properly show some interactive states of menu items (like active or hovered/highlighted), since they display menu items as standalone or as part of an always-expanded, detached menu. To see the full interactivity of menu items, check out a component that contains a menu, like Select, Lookup, or TypeaheadSearch.
Note: For icon properties, the relevant icon also needs to be imported from the @wikimedia/codex-icons package. See the usage documentation for more information.
When a menu item displays a search result, the current search query can be provided (along with the highlightQuery prop) and it will be highlighted within the menu item's title. In the example below, the search query is "Co".
For search results, a match property may be included that represents the text related to that item that matched the search query (e.g. a Wikidata alias). The match will be displayed after the label. In the example below, the search query is "felis margarita," an alias of the Wikidata item "sand cat."
sand cat(Felis margarita)species of the only cat living foremost in true deserts
<template><cdx-menu-itemv-bind="menuItem"search-query="felis margarita"/></template><scriptlang="ts">import{ defineComponent }from'vue';import{ CdxMenuItem }from'@wikimedia/codex';const menuItem ={value:'Q175329',label:'sand cat',match:'(Felis margarita)',description:'species of the only cat living foremost in true deserts',id:'menu-item-with-match'};exportdefaultdefineComponent({name:'MenuItemWithMatch',components:{ CdxMenuItem },setup(){return{
menuItem
};}});</script>
In addition to simple strings, the label, description, and match props can be objects with a string value and an associated language code. The lang attribute for that string will be set in the markup. The example below demonstrates a search result in a Greek interface for the English word "moon."
<template><cdx-menu-itemv-bind="menuItem"search-query="Donaudampfschiffahrtselektrizit":highlight-query="true":hide-description-overflow="true"/></template><scriptlang="ts">import{ defineComponent }from'vue';import{ CdxMenuItem }from'@wikimedia/codex';const menuItem ={value:2201357,label:'Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft',url:'https://en.wikipedia.org/wiki/Donaudampfschiffahrtselektrizit%C3%A4tenhauptbetriebswerkbauunterbeamtengesellschaft',description:'Arguably the longest German word, which again, is Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft',id:'menu-item-hide-overflow'};exportdefaultdefineComponent({name:'MenuItemHideOverflow',components:{ CdxMenuItem },setup(){return{
menuItem
};}});</script>
<template><cdx-menuv-model:selected="selection":expanded="true":menu-items="searchResults":show-thumbnail="true":search-query="searchQuery":highlight-query="true"/></template><scriptlang="ts">import{ defineComponent, ref }from'vue';import{ CdxMenu }from'@wikimedia/codex';import searchResults from'./searchResultsGraphemes';// This demo serves to demonstrate how the highlighting mechanism in the// SearchResultTitle component handles languages with characters represented by// more than one Unicode scalar values.//// See https://phabricator.wikimedia.org/T277256 and// https://phabricator.wikimedia.org/T35242 for details.exportdefaultdefineComponent({name:'MenuItemsGraphemes',components:{ CdxMenu },setup(){const selection =ref('');return{
selection,
searchResults,searchQuery:'ইতাল'};}});</script>