MenuItem

A MenuItem is a selectable option within a Menu.

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.

Guidelines

When to use menu items

MenuItem is an “internal” component, used exclusively to represent content within a Menu. It cannot be used by itself.

Specifications

Each menu item may include the following elements:

1. Visual element (optional)
   An icon or thumbnail can be included in order to provide more context about the menu item content.
2. Label
   A clear and descriptive title for the menu item.
3. Supporting text (optional)
   Optional and subtle text that supports or explains the label.
4. Match text (optional)
   In the context of a search suggestions menu, this optional text displays the alternative label of an item that matches the search query (e.g. an alias).
5. Description (optional)
   Optional and subtle descriptive text that provides additional information about the menu item.
6. Multi-selection indicator
   A check icon is displayed next to the label when the menu supports multi-selection.

Component limitations

Menu items have no minimum or maximum character requirement, although concise text is recommended. If the label is multiline, the supporting text will be positioned next to the last line of the label.

Refer to the MenuItem component in Codex Figma.

Types

According to the functionality, type of content, and selection type, the menu items can be categorized as follows.

Menu item functionality

Menu items can also be classified based on its functionality:

1. Selectable options
   Menu items typically contained in form elements like Select or Combobox components.
2. Trigger actions
   Menu items typically contained within a MenuButton. According to the type of action, they can be categorized as:
   • Standard actions: neutral actions such as "Edit" or "Share".
   • Destructive actions: actions with potentially negative or irreversible impact, such as "Delete".

Media elements within the menu item

Menu items can incorporate different media types to provide additional visual context to the menu item content:

1. Icon
   Use the start icon to visually reinforce the menu item content.
2. Thumbnail
   Use a thumbnail to provide a preview of the menu item content.

Text elements within the menu item

Menu items can differ based on the specific type of content they display or how they handle search results:

1. Description
   A secondary subtle text can be optionally included to provide additional information about the menu item.
2. Supporting text
   Text that supports or explains the label can be optionally displayed after the label in a more subtle color.
3. Search query highlighted
   When displaying search results, the search query is provided in normal font weight, while the rest of the label is in bold to bring attention to the available suggestions based on the search query.
4. Search query match
   In a search suggestions menu, this optional text provides an alternative label or alias for an item that matches the search query.

Selection types

Menu items can support different selection types depending on the component in which they are displayed:

1. Single-selection
   Allows the user to select only one item from the menu at a time.
2. Multi-selection
   Enables the user to select multiple items from the menu. A check icon is displayed next to the label to indicate that more than one item can be selected.

Interaction states

Menu items have the following visually separate states:

1. Default
2. Hover
3. Active
4. Selected
5. Selected hover
6. Selected active
7. Disabled
8. Destructive default
9. Destructive hover
10. Destructive active

Note

Only menu items representing options can be selected, while menu items representing actions can only be clicked.

Best practices

Consider the following recommendations when using menu items within menus.

Icon, label, and description

Do:

• Use icons to emphasize the meaning of the label, adapting them as needed for each project.
• Keep the label and optional description concise to enhance menu scannability and readability.

Don't:

• Use icons that are difficult to understand or do not clearly convey their purpose.
• Overcrowd menu items with lengthy labels and descriptions.

Supporting text

Do:

• Include supporting text within brackets to explain where a search result is redirected from.

Don't:

• Include supporting text without brackets. It should always be enclosed within brackets to differentiate it from the item label.

Demos

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.

Configurable

Note that manually hovering over or selecting this menu item is disabled, the configuration options to set these states should be used.

To display the multiselect icon, toggle on the selected and multiselect props.

• Item labelDescription text

<cdx-menu-item :icon="cdxIconGlobe" label="Item label" description="Description text" />

Name	Value
Props
highlighted
active
selected
multiselect
disabled
icon	cdxIconGlobe
label
boldLabel
match
supportingText
description
hideDescriptionOverflow
searchQuery
View
Reading direction	Left to right (LTR) Right to left (RTL)
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.

Default

• Color

NPM

<template>
	<ul role="listbox">
		<cdx-menu-item v-bind="menuItem" />
	</ul>
</template>

<script>
import { defineComponent } from 'vue';
import { CdxMenuItem } from '@wikimedia/codex';

const menuItem = {
	value: 5921,
	label: 'Color',
	id: 'menu-item-default'
};

export default defineComponent( {
	name: 'MenuItemDefault',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

MediaWiki

<template>
	<ul role="listbox">
		<cdx-menu-item v-bind="menuItem"></cdx-menu-item>
	</ul>
</template>

<script>
const { defineComponent } = require( 'vue' );
const { CdxMenuItem } = require( '@wikimedia/codex' );

const menuItem = {
	value: 5921,
	label: 'Color',
	id: 'menu-item-default'
};

module.exports = defineComponent( {
	name: 'MenuItemDefault',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

With description and bold label

• Colorvisual perception of light wavelengths

NPM

<template>
	<ul role="listbox">
		<cdx-menu-item v-bind="menuItem" :bold-label="true" />
	</ul>
</template>

<script>
import { defineComponent } from 'vue';
import { CdxMenuItem } from '@wikimedia/codex';

const menuItem = {
	value: 5921,
	label: 'Color',
	description: 'visual perception of light wavelengths',
	id: 'menu-item-with-description'
};

export default defineComponent( {
	name: 'MenuItemWithDescription',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

MediaWiki

<template>
	<ul role="listbox">
		<cdx-menu-item v-bind="menuItem" :bold-label="true"></cdx-menu-item>
	</ul>
</template>

<script>
const { defineComponent } = require( 'vue' );
const { CdxMenuItem } = require( '@wikimedia/codex' );

const menuItem = {
	value: 5921,
	label: 'Color',
	description: 'visual perception of light wavelengths',
	id: 'menu-item-with-description'
};

module.exports = defineComponent( {
	name: 'MenuItemWithDescription',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

With link

If a url property is included, the menu item will be wrapped in an anchor tag.

• Colorvisual perception of light wavelengths

NPM

<template>
	<ul role="listbox">
		<cdx-menu-item v-bind="menuItem" />
	</ul>
</template>

<script>
import { defineComponent } from 'vue';
import { CdxMenuItem } from '@wikimedia/codex';

const menuItem = {
	value: 5921,
	label: 'Color',
	url: 'https://en.wikipedia.org/wiki/Color',
	description: 'visual perception of light wavelengths',
	id: 'menu-item-with-url'
};

export default defineComponent( {
	name: 'MenuItemWithUrl',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

MediaWiki

<template>
	<ul role="listbox">
		<cdx-menu-item v-bind="menuItem"></cdx-menu-item>
	</ul>
</template>

<script>
const { defineComponent } = require( 'vue' );
const { CdxMenuItem } = require( '@wikimedia/codex' );

const menuItem = {
	value: 5921,
	label: 'Color',
	url: 'https://en.wikipedia.org/wiki/Color',
	description: 'visual perception of light wavelengths',
	id: 'menu-item-with-url'
};

module.exports = defineComponent( {
	name: 'MenuItemWithUrl',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

With icon

• Colorvisual perception of light wavelengths

NPM

<template>
	<ul role="listbox">
		<cdx-menu-item v-bind="menuItem" />
	</ul>
</template>

<script>
import { defineComponent } from 'vue';
import { CdxMenuItem } from '@wikimedia/codex';
import { cdxIconTag } from '@wikimedia/codex-icons';

const menuItem = {
	value: 5921,
	label: 'Color',
	description: 'visual perception of light wavelengths',
	icon: cdxIconTag,
	id: 'menu-item-with-icon'
};

export default defineComponent( {
	name: 'MenuItemWithIcon',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

MediaWiki

<template>
	<ul role="listbox">
		<cdx-menu-item v-bind="menuItem"></cdx-menu-item>
	</ul>
</template>

<script>
const { defineComponent } = require( 'vue' );
const { CdxMenuItem } = require( '@wikimedia/codex' );
const { cdxIconTag } = require( './icons.json' );

const menuItem = {
	value: 5921,
	label: 'Color',
	description: 'visual perception of light wavelengths',
	icon: cdxIconTag,
	id: 'menu-item-with-icon'
};

module.exports = defineComponent( {
	name: 'MenuItemWithIcon',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

With thumbnail

• Colorvisual perception of light wavelengths

NPM

<template>
	<ul role="listbox">
		<cdx-menu-item v-bind="menuItem" :show-thumbnail="true" />
	</ul>
</template>

<script>
import { defineComponent } from 'vue';
import { CdxMenuItem } from '@wikimedia/codex';

const menuItem = {
	value: 5921,
	label: 'Color',
	url: 'https://en.wikipedia.org/wiki/Color',
	description: 'visual perception of light wavelengths',
	thumbnail: {
		url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/64_365_Color_Macro_%285498808099%29.jpg/200px-64_365_Color_Macro_%285498808099%29.jpg'
	},
	id: 'menu-item-with-thumbnail'
};

export default defineComponent( {
	name: 'MenuItemWithThumbnail',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

MediaWiki

<template>
	<ul role="listbox">
		<cdx-menu-item v-bind="menuItem" :show-thumbnail="true"></cdx-menu-item>
	</ul>
</template>

<script>
const { defineComponent } = require( 'vue' );
const { CdxMenuItem } = require( '@wikimedia/codex' );

const menuItem = {
	value: 5921,
	label: 'Color',
	url: 'https://en.wikipedia.org/wiki/Color',
	description: 'visual perception of light wavelengths',
	thumbnail: {
		url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/64_365_Color_Macro_%285498808099%29.jpg/200px-64_365_Color_Macro_%285498808099%29.jpg'
	},
	id: 'menu-item-with-thumbnail'
};

module.exports = defineComponent( {
	name: 'MenuItemWithThumbnail',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

With search query highlighted

When a menu item displays a search result, the current search query can be provided (along with the highlightQuery prop) and it will be visually differentiated within the menu item's title. The search query text will have a normal font weight, while the rest of the title will be bold, which is meant to bring attention to the available suggestions based on the current search query.

In the example below, the search query is "Co".

• Colorvisual perception of light wavelengths

NPM

<template>
	<ul role="listbox">
		<cdx-menu-item
			v-bind="menuItem"
			search-query="Co"
			:highlight-query="true"
		/>
	</ul>
</template>

<script>
import { defineComponent } from 'vue';
import { CdxMenuItem } from '@wikimedia/codex';

const menuItem = {
	value: 5921,
	label: 'Color',
	url: 'https://en.wikipedia.org/wiki/Color',
	description: 'visual perception of light wavelengths',
	id: 'menu-item-highlight-query'
};

export default defineComponent( {
	name: 'MenuItemHighlightQuery',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

MediaWiki

<template>
	<ul role="listbox">
		<cdx-menu-item
			v-bind="menuItem"
			search-query="Co"
			:highlight-query="true"
		></cdx-menu-item>
	</ul>
</template>

<script>
const { defineComponent } = require( 'vue' );
const { CdxMenuItem } = require( '@wikimedia/codex' );

const menuItem = {
	value: 5921,
	label: 'Color',
	url: 'https://en.wikipedia.org/wiki/Color',
	description: 'visual perception of light wavelengths',
	id: 'menu-item-highlight-query'
};

module.exports = defineComponent( {
	name: 'MenuItemHighlightQuery',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

With search query match

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

NPM

<template>
	<ul role="listbox">
		<cdx-menu-item v-bind="menuItem" search-query="felis margarita" />
	</ul>
</template>

<script>
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'
};

export default defineComponent( {
	name: 'MenuItemWithMatch',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

MediaWiki

<template>
	<ul role="listbox">
		<cdx-menu-item v-bind="menuItem" search-query="felis margarita"></cdx-menu-item>
	</ul>
</template>

<script>
const { defineComponent } = require( 'vue' );
const { CdxMenuItem } = require( '@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'
};

module.exports = defineComponent( {
	name: 'MenuItemWithMatch',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

With supporting text

Text that supports or explains the label can be added via the supportingText prop. This text will be displayed after the label in a more subtle color.

The example below shows a result for the search term "Corn," which redirects to the article for "Maize" on English Wikipedia.

• Maize (redirected from Corn)Genus of grass cultivated as a food crop

NPM

<template>
	<ul role="listbox">
		<cdx-menu-item v-bind="menuItem" search-query="corn" />
	</ul>
</template>

<script>
import { defineComponent } from 'vue';
import { CdxMenuItem } from '@wikimedia/codex';

const menuItem = {
	value: 20656228,
	label: 'Maize',
	supportingText: '(redirected from Corn)',
	url: 'https://en.wikipedia.org/wiki/Maize',
	description: 'Genus of grass cultivated as a food crop',
	thumbnail: {
		url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Zea_mays_-_K%C3%B6hler%E2%80%93s_Medizinal-Pflanzen-283.jpg/147px-Zea_mays_-_K%C3%B6hler%E2%80%93s_Medizinal-Pflanzen-283.jpg'
	},
	id: 'menu-item-with-supporting-text'
};

export default defineComponent( {
	name: 'MenuItemWithSupportingText',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

MediaWiki

<template>
	<ul role="listbox">
		<cdx-menu-item v-bind="menuItem" search-query="corn"></cdx-menu-item>
	</ul>
</template>

<script>
const { defineComponent } = require( 'vue' );
const { CdxMenuItem } = require( '@wikimedia/codex' );

const menuItem = {
	value: 20656228,
	label: 'Maize',
	supportingText: '(redirected from Corn)',
	url: 'https://en.wikipedia.org/wiki/Maize',
	description: 'Genus of grass cultivated as a food crop',
	thumbnail: {
		url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Zea_mays_-_K%C3%B6hler%E2%80%93s_Medizinal-Pflanzen-283.jpg/147px-Zea_mays_-_K%C3%B6hler%E2%80%93s_Medizinal-Pflanzen-283.jpg'
	},
	id: 'menu-item-with-supporting-text'
};

module.exports = defineComponent( {
	name: 'MenuItemWithSupportingText',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

With multiple languages

Individual lang attributes can be set for the label, description, match, and supportingText props via the language prop, which is an object of lang attributes for those props.

The example below demonstrates a search result in a Greek interface for the English word "moon."

• Σελήνη (moon)ο μοναδικός φυσικός δορυφόρος της Γης

NPM

<template>
	<ul role="listbox">
		<cdx-menu-item v-bind="menuItem" search-query="moon" />
	</ul>
</template>

<script>
import { defineComponent } from 'vue';
import { CdxMenuItem } from '@wikimedia/codex';

const menuItem = {
	value: 'Q405',
	label: 'Σελήνη',
	match: '(moon)',
	description: 'ο μοναδικός φυσικός δορυφόρος της Γης',
	language: {
		label: 'el',
		match: 'en',
		description: 'el'
	},
	id: 'menu-item-multiple-langs'
};

export default defineComponent( {
	name: 'MenuItemMultipleLangs',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

MediaWiki

<template>
	<ul role="listbox">
		<cdx-menu-item v-bind="menuItem" search-query="moon"></cdx-menu-item>
	</ul>
</template>

<script>
const { defineComponent } = require( 'vue' );
const { CdxMenuItem } = require( '@wikimedia/codex' );

const menuItem = {
	value: 'Q405',
	label: 'Σελήνη',
	match: '(moon)',
	description: 'ο μοναδικός φυσικός δορυφόρος της Γης',
	language: {
		label: 'el',
		match: 'en',
		description: 'el'
	},
	id: 'menu-item-multiple-langs'
};

module.exports = defineComponent( {
	name: 'MenuItemMultipleLangs',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

With long title and search query highlighted

• DonaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaftArguably the longest German word

NPM

<template>
	<ul role="listbox">
		<cdx-menu-item
			v-bind="menuItem"
			search-query="Donaudampfschiffahrtselektrizit"
			:highlight-query="true"
		/>
	</ul>
</template>

<script>
import { defineComponent } from 'vue';
import { CdxMenuItem } from '@wikimedia/codex';

// See https://phabricator.wikimedia.org/T280982.
const menuItem = {
	value: 2201357,
	label: 'Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft',
	url: 'https://en.wikipedia.org/wiki/Donaudampfschiffahrtselektrizit%C3%A4tenhauptbetriebswerkbauunterbeamtengesellschaft',
	description: 'Arguably the longest German word',
	id: 'menu-item-long-text',
	language: {
		// Support: Firefox, which only hyphenates capitalized words when lang="de".
		label: 'de'
	}
};

export default defineComponent( {
	name: 'MenuItemLongText',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

MediaWiki

<template>
	<ul role="listbox">
		<cdx-menu-item
			v-bind="menuItem"
			search-query="Donaudampfschiffahrtselektrizit"
			:highlight-query="true"
		></cdx-menu-item>
	</ul>
</template>

<script>
const { defineComponent } = require( 'vue' );
const { CdxMenuItem } = require( '@wikimedia/codex' );

// See https://phabricator.wikimedia.org/T280982.
const menuItem = {
	value: 2201357,
	label: 'Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft',
	url: 'https://en.wikipedia.org/wiki/Donaudampfschiffahrtselektrizit%C3%A4tenhauptbetriebswerkbauunterbeamtengesellschaft',
	description: 'Arguably the longest German word',
	id: 'menu-item-long-text',
	language: {
		// Support: Firefox, which only hyphenates capitalized words when lang="de".
		label: 'de'
	}
};

module.exports = defineComponent( {
	name: 'MenuItemLongText',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

With description text overflow hidden

• DonaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaftArguably the longest German word, which again, is Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft

NPM

<template>
	<ul role="listbox">
		<cdx-menu-item
			v-bind="menuItem"
			search-query="Donaudampfschiffahrtselektrizit"
			:highlight-query="true"
			:hide-description-overflow="true"
		/>
	</ul>
</template>

<script>
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',
	language: {
		// Support: Firefox, which only hyphenates capitalized words when lang="de".
		label: 'de'
	}
};

export default defineComponent( {
	name: 'MenuItemHideOverflow',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

MediaWiki

<template>
	<ul role="listbox">
		<cdx-menu-item
			v-bind="menuItem"
			search-query="Donaudampfschiffahrtselektrizit"
			:highlight-query="true"
			:hide-description-overflow="true"
		></cdx-menu-item>
	</ul>
</template>

<script>
const { defineComponent } = require( 'vue' );
const { CdxMenuItem } = require( '@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',
	language: {
		// Support: Firefox, which only hyphenates capitalized words when lang="de".
		label: 'de'
	}
};

module.exports = defineComponent( {
	name: 'MenuItemHideOverflow',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

Within a list

• Co
• Colorvisual perception of light wavelengths
• Coloradostate of the United States of America
• Colorado Springs, Coloradocounty seat of El Paso County, Colorado, United States
• Colorado Rivermajor river in the western United States and Mexico
• Colour revolutionpolitical term associated with democratization
• Color depthrange of colors in a display
• Color temperatureproperty of light sources related to black-body radiation
• Color photographythat uses media capable of representing colors
• Colorado State Universitypublic research university in Fort Collins, Colorado, USA

NPM

<template>
	<cdx-menu
		v-model:selected="selection"
		:expanded="true"
		:menu-items="searchResults"
		:show-thumbnail="true"
		:search-query="searchQuery"
		:highlight-query="true"
	/>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { CdxMenu } from '@wikimedia/codex';
import searchResults from './searchResults.json';

export default defineComponent( {
	name: 'MenuItems',
	components: { CdxMenu },
	setup() {
		const selection = ref( '' );
		return {
			selection,
			searchResults,
			searchQuery: 'Co'
		};
	}
} );
</script>

MediaWiki

<template>
	<cdx-menu
		v-model:selected="selection"
		:expanded="true"
		:menu-items="searchResults"
		:show-thumbnail="true"
		:search-query="searchQuery"
		:highlight-query="true"
	></cdx-menu>
</template>

<script>
const { defineComponent, ref } = require( 'vue' );
const { CdxMenu } = require( '@wikimedia/codex' );
const searchResults = require( './searchResults.json' );

module.exports = defineComponent( {
	name: 'MenuItems',
	components: { CdxMenu },
	setup() {
		const selection = ref( '' );
		return {
			selection,
			searchResults,
			searchQuery: 'Co'
		};
	}
} );
</script>

With graphemes

• ইতালিদক্ষিণাঞ্চলীয় ইউরোপের দেশ
• ইতালির বিশ্ব ঐতিহ্যবাহী স্থানসমূহের তালিকা
• ইতালীয় ভাষা
• ইতালি জাতীয় ফুটবল দল
• ইতালির সড়ক সংকেতসমূহ
• ইতালিতে কোভিড-১৯ এর বৈশ্বিক মহামারীইতালিতে ভাইরাসঘটিত চলমান কোভিড-১৯ এর বৈশ্বিক মহামারী
• ইতালীয় ফুটবল ফেডারেশন
• ইতালি–ফিলিপাইন সম্পর্কইতালি ও ফিলিপাইন রাষ্ট্রদ্বয়ের মধ্যকার দ্বিপাক্ষিক সম্পর্ক
• ইতালীয় নব্যবাস্তববাদ
• ইতালিতে উন্মুক্ত প্রবেশাধিকার

NPM

<template>
	<cdx-menu
		v-model:selected="selection"
		:expanded="true"
		:menu-items="searchResults"
		:show-thumbnail="true"
		:search-query="searchQuery"
		:highlight-query="true"
	/>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { CdxMenu } from '@wikimedia/codex';
import searchResults from './searchResultsGraphemes.json';

// 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.
export default defineComponent( {
	name: 'MenuItemsGraphemes',
	components: { CdxMenu },
	setup() {
		const selection = ref( '' );
		return {
			selection,
			searchResults,
			searchQuery: 'ইতাল'
		};
	}
} );
</script>

MediaWiki

<template>
	<cdx-menu
		v-model:selected="selection"
		:expanded="true"
		:menu-items="searchResults"
		:show-thumbnail="true"
		:search-query="searchQuery"
		:highlight-query="true"
	></cdx-menu>
</template>

<script>
const { defineComponent, ref } = require( 'vue' );
const { CdxMenu } = require( '@wikimedia/codex' );
const searchResults = require( './searchResultsGraphemes.json' );

// 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.
module.exports = defineComponent( {
	name: 'MenuItemsGraphemes',
	components: { CdxMenu },
	setup() {
		const selection = ref( '' );
		return {
			selection,
			searchResults,
			searchQuery: 'ইতাল'
		};
	}
} );
</script>

Vue usage

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.

Props

Prop name	Description	Type	Default
id(required)	ID for HTML id attribute.	string
value(required)	The value provided to the parent menu component when this menu item is selected.	MenuItemValue
disabled	Whether the menu item is disabled.	boolean	false
selected	Whether this menu item is selected.	boolean	false
active	Whether this menu item is being pressed.	boolean	false
highlighted	Whether this menu item is visually highlighted due to hover or keyboard navigation.	boolean	false
label	Label for the menu item. If this isn't provided, the value will be displayed instead.	string	''
match	Text that matches current search query. Only used for search results and will be displayed after the label.	string	''
supportingText	Text that supports the label. Supporting text will appear next to the label in a more subtle color.	string	''
url	URL for the menu item. If provided, the content of the menu item will be wrapped in an anchor tag.	string	''
icon	Icon for the menu item.	Icon	''
showThumbnail	Whether a thumbnail (or a placeholder icon) should be displayed.	boolean	false
thumbnail	Thumbnail for the menu item.	Thumbnail|null	null
description	Description of the menu item.	string|null	''
searchQuery	The search query to be highlighted within the menu item's title.	string	''
boldLabel	Whether to bold menu item labels.	boolean	false
hideDescriptionOverflow	Whether to hide description text overflow via an ellipsis.	boolean	false
language	Optional language codes for label, match, supporting text, and description. If included, that language code will be added as a lang attribute to the element wrapping that text node.	MenuItemLanguageData	{}
action	MenuItems inside a MenuButton can also support an "action" prop	ButtonAction	'default'
multiselect	Whether this menu is in multiselect mode.	boolean	false

Events

Event name	Properties	Description
change	menuState MenuState - State to change setState boolean - Whether to set that state to this menu item	Emitted when the menu item becomes selected, active or highlighted in response to user interaction. Handled in the Menu component.

Slots

Name	Description	Bindings
default	Custom menu item content.