Skip to content
Direction:
On this page

MenuItem

Item within a Menu component.

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.

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.

  • Item labelDescription text
  • NameValue
    Props
    disabled
    selected
    active
    highlighted
    label
    match
    icon
    description
    searchQuery
    boldLabel
    hideDescriptionOverflow
    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

    With description and bold label

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

    With icon

    With thumbnail

    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".

    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."

    With multiple languages

    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."

    With long title and search query highlighted

    With description text overflow hidden

    Within a list

    With graphemes

    Usage

    Props

    Prop nameDescriptionTypeDefault
    id(required)ID for HTML id attribute.string
    value(required)The value provided to the parent menu component when this menu item is selected.string|number
    disabledWhether the menu item is disabled.booleanfalse
    selectedWhether this menu item is selected.booleanfalse
    activeWhether this menu item is being pressed.booleanfalse
    highlightedWhether this menu item is hovered over or highlighted via keyboard navigation.booleanfalse
    labelLabel for the menu item. If this isn't provided, the value will be displayed instead.string''
    matchText that matches current search query. Only used for search results and will be displayed after the label.string''
    urlURL for the menu item. If provided, the content of the menu item will be wrapped in an anchor tag.string''
    iconIcon for the menu item.Icon''
    showThumbnailWhether a thumbnail (or a placeholder icon) should be displayed.booleanfalse
    thumbnailThumbnail for the menu item.Thumbnail|nullnull
    descriptionDescription of the menu item.string|null''
    searchQueryThe search query to be highlighted within the menu item's title.string''
    boldLabelWhether to bold menu item labels.booleanfalse
    hideDescriptionOverflowWhether to hide description text overflow via an ellipsis.booleanfalse
    languageOptional language codes for label, match, and description.

    If included, that language code will be added as a lang attribute to the element wrapping that text node.
    MenuItemLanguageData() => { return {}; }

    Events

    Event namePropertiesDescription
    changemenuState MenuState - State to change setState boolean - Whether to set that state to this menu itemEmitted when the menu item becomes selected, active or highlighted in response to user interaction. Handled in the Menu component.

    Slots

    NameDescriptionBindings
    defaultCustom menu item content.