Dialog menu

The dialog menu component shows a menu at the position of the element used to activate it.

Basic example

Open dialog menu

With searchbar

Open dialog menu

With icons

Open dialog menu

With keyboard shortcuts

Open dialog menu

Groups

Basic example

With separators

With and w/o group labels

Collapsible

Mixed settings example

Description

The <wui-dialog-menu> component shows a menu at the position of the element used to activate it. The component provides groups, menu item search, keyboard support, and various slots for custom menu items.

Example: Basic usage

<template>
  <div>
    <wui-button id="btn-example-basic" @click="showMenu = true"
      >Open dialog menu</wui-button
    >
    <wui-dialog-menu
      :items="items"
      target="btn-example-basic"
      v-model="showMenu"
      @selected="handleSelectedEvent"
    ></wui-dialog-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showMenu: false,
        items: [
          { text: "Menu item 1", value: "item_1" },
          { text: "Menu item 2", value: "item_2" },
          { text: "Menu item 3", value: "item_3" },
        ],
      };
    },
    methods: {
      handleSelectedEvent(value) {
        console.log("value", value);
      },
    },
  };
</script>

<!-- wui-dialog-menu-example.vue -->

Target

The target is the trigger element (or component) that will trigger the dialog menu. The target is specified via the target prop, and can be any of the following:

A string identifying the ID of the trigger element (or ID of the root element of a component)
A reference (ref) to an HTMLElement or an SVGElement (e.g. via this.$refs.refName)
A reference (ref) to a component that has either an HTMLElement or SVGElement as its root element (e.g. via this.$refs.refName)
A function (callback) that returns a reference to an HTMLElement or SVGElement

For more information on references, see the official Vue documentation.

There are several methods that you can employ to toggle the visibility of <wui-dialog-menu>.

Using `v-w-dialog-menu` directive

Other elements can easily show modals using the v-w-dialog-menu directive.

This approach will automatically return focus to the trigger element once the dialog menu closes (similar to default Bootstrap functionality). Other approaches for toggling dialog menu visibility may require additional code to implement this accessibility feature.

<template>
  <div>
    <!-- Using modifiers -->
    <wui-button v-w-dialog-menu.sg-dialog-menu-visibility
      >Open dialog menu</wui-button
    >

    <!-- Using value -->
    <wui-button v-w-dialog-menu="'sg-dialog-menu-visibility'"
      >Open dialog menu</wui-button
    >

    <!-- The dialog menu -->
    <wui-dialog-menu
      id="sg-dialog-menu-visibility"
      ref="my-dialog-menu"
      :items="items"
      target="btn-example-show"
      @selected="handleSelectedEvent"
    ></wui-dialog-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { text: "Menu item 1", value: "item_1" },
          { text: "Menu item 2", value: "item_2" },
          { text: "Menu item 3", value: "item_3" },
        ],
      };
    },
    methods: {
      handleSelectedEvent(value) {
        console.log("value", value);
        this.$refs["my-dialog-menu"].hide();
      },
    },
  };
</script>

<!-- wui-dialog-menu-toggle-visibility.vue -->

See the Accessibility section below for details.

Using `show()`, `hide()`, and `toggle()` component methods

You can access the dialog menu using ref attribute and then call the show(), hide() or toggle() methods.

<template>
  <div>
    <wui-button id="btn-example-show" @click="showMenu"
      >Open dialog menu</wui-button
    >
    <wui-button id="btn-example-toggle" @click="toggleMenu"
      >Open dialog menu</wui-button
    >
    <wui-dialog-menu
      ref="my-dialog-menu"
      :items="items"
      target="btn-example-show"
      @selected="handleSelectedEvent"
    ></wui-dialog-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { text: "Menu item 1", value: "item_1" },
          { text: "Menu item 2", value: "item_2" },
          { text: "Menu item 3", value: "item_3" },
        ],
      };
    },
    methods: {
      showMenu(value) {
        this.$refs["my-dialog-menu"].show();
      },
      handleSelectedEvent(value) {
        this.$refs["my-dialog-menu"].hide();
      },
      toggleMenu(value) {
        this.$refs["my-dialog-menu"].toggle("#btn-example-toggle");
      },
    },
  };
</script>

<!-- wui-dialog-menu-toggle-methods.vue -->

Using `v-model` property

v-model property is always automatically synced with <wui-dialog-menu> visible state and you can show/hide using v-model.

<template>
  <div>
    <wui-button id="btn-example-v-model" @click="showMenu = !showMenu"
      >Open dialog menu</wui-button
    >
    <wui-dialog-menu
      v-model="showMenu"
      :items="items"
      target="v-model"
    ></wui-dialog-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showMenu: false,
        items: [
          { text: "Menu item 1", value: "item_1" },
          { text: "Menu item 2", value: "item_2" },
          { text: "Menu item 3", value: "item_3" },
        ],
      };
    },
  };
</script>

<!-- wui-dialog-menu-v-model.vue -->

When using the v-model prop, do not use the visible prop at the same time.

Items

items are an array of objects. Available fields:

value The selected value which will be emitted when the user makes a selection
disabled Disables item for selection
text Display text
icon FontAwesome icon to be rendered at the beginning of the menu item
keys Keyboard combination / shortcut to be displayed at the end of the menu item

value can be a string or number. keys can be a string or an array of single characters. icon can be a string or an array (see wui-fa-icon docs)

const items = [
  // `keys` as a string
  { text: "Copy", value: "COPY", keys: "⌘C" },
  { text: "Paste", value: "PASTE", keys: "⌘V" },
  { text: "Edit", value: "EDIT", icon: ["far", "pen"] },
  {
    text: "Delete",
    value: "DELETE",
    // `icon` as an array
    icon: ["far", "trashcan"],
    // `keys` as an array
    keys: ["⇧", "⌫"],
    disabled: true,
  },
  { text: "Menu item 3", value: 3 },
  // `icon` as a string
  { text: "Upload", value: "item_3", icon: "up-from-line" },
];

Menu items can also be merged into groups. A group can behave like a collapsible component if collapsible is specified. In this case, the heading becomes clickable and a status icon is rendered.

groups are an array of objects. Available fields:

key a required and unique identifier of this group
label an optional title for this group which will be displayed in the group header
items array of menu items (see items object above)
collapsible Whether or not the group can be expanded and collapsed
collapsed Renders the group in collapsed state (menu items are not visible)
separator Renders a horizontal line at the bottom of the group

<template>
  <div>
    <wui-button id="btn-example-groups" @click="showMenu = true"
      >Open dialog menu</wui-button
    >
    <wui-dialog-menu
      :groups="groups"
      target="btn-example-groups"
      v-model="showMenu"
      @selected="handleSelectedEvent"
    ></wui-dialog-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showMenu: false,
        groups: [
          {
            // Required
            key: "group_initial_collapsed",
            // Optional group title
            label: "Group 1 - collapsed",
            // Whether or not the group should behave like a collapsible component
            collapsible: true,
            // Whether or not the initial state is collapsed
            collapsed: true,
            // Whether or not a horizontal line as a separator should be rendered at the bottom of the group
            separator: true,
            // Items to display in this group
            // Keep in mind that each `value` must be unique across *all* groups
            items: [
              { text: "G1 - Menu item 1", value: "group_1_item_1" },
              {
                text: "G1 - Menu item 2",
                value: "group_1_item_2",
                disabled: true,
              },
            ],
          },
          {
            key: "group_without_label_not_collapsible_with_separator",
            separator: true,
            items: [
              { text: "G2 - Menu item 1", value: "group_2_item_1" },
              { text: "G2 - Menu item 2", value: "group_2_item_2" },
            ],
          },
          {
            key: "group_collapsible",
            label: "Group 3",
            collapsible: true,
            items: [
              { text: "G3 - Menu item 1", value: "group_3_item_1" },
              { text: "G3 - Menu item 2", value: "group_3_item_2" },
            ],
          },
          {
            key: "group_without_separator",
            items: [
              { text: "G4 - Menu item 1", value: "group_4_item_1" },
              { text: "G4 - Menu item 2", value: "group_4_item_2" },
            ],
          },
        ],
      };
    },
    methods: {
      handleSelectedEvent(value) {
        console.log("value", value);
      },
    },
  };
</script>

<!-- wui-dialog-menu-groups-example.vue -->

Optionally, a search field can be activated with the searchbar prop, which is displayed at the top of the list. The menu items are searched and filtered according to the search term entered by the user.

<template>
  <div>
    <wui-button id="btn-example-searchbar" @click="showMenu = true"
      >Open dialog menu</wui-button
    >
    <wui-dialog-menu
      :items="items"
      :searchbar="true"
      target="btn-example-searchbar"
      v-model="showMenu"
      @selected="handleSelectedEvent"
    ></wui-dialog-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showMenu: false,
        items: [
          { text: "Menu item 1", value: "item_1" },
          { text: "Menu item 2", value: "item_2" },
          { text: "Menu item 3", value: "item_3" },
        ],
      };
    },
    methods: {
      handleSelectedEvent(value) {
        console.log("value", value);
      },
    },
  };
</script>

<!-- wui-dialog-menu-searchbar-example.vue -->

You can optionally specify an icon for a menu item, which is displayed at the beginning of the menu item. The value of the icon prop is passed to the wui-fa-icon component (see wui-fa-icon docs).

<template>
  <div>
    <wui-button id="btn-example-icon" @click="showMenu = true"
      >Open dialog menu</wui-button
    >
    <wui-dialog-menu
      :items="items"
      target="btn-example-icon"
      v-model="showMenu"
      @selected="handleSelectedEvent"
    ></wui-dialog-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showMenu: false,
        items: [
          {
            text: "Upload",
            value: "UPLOAD",
            // Can be a string
            icon: "up-from-line",
          },
          {
            text: "Delete",
            value: "DELETE",
            // ... or an array
            icon: ["far", "trashcan"],
          },
        ],
      };
    },
    methods: {
      handleSelectedEvent(value) {
        console.log("value", value);
      },
    },
  };
</script>

<!-- wui-dialog-menu-icon-example.vue -->

You can configure a keyboard shortcut for each menu item, which is displayed at the end of a menu item. The displayed characters are automatically combined with a +.

<template>
  <div>
    <wui-button id="btn-example-shortcut" @click="showMenu = true"
      >Open dialog menu</wui-button
    >
    <wui-dialog-menu
      :items="items"
      target="btn-example-shortcut"
      v-model="showMenu"
      @selected="handleSelectedEvent"
    ></wui-dialog-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showMenu: false,
        items: [
          {
            text: "Paste",
            value: "PASTE",
            // Can be a string of any characters
            keys: "⌘V",
          },
          {
            text: "Delete",
            value: "DELETE",
            // ... or an array
            keys: ["⇧", "⌫"],
          },
        ],
      };
    },
    methods: {
      handleSelectedEvent(value) {
        console.log("value", value);
      },
    },
  };
</script>

<!-- wui-dialog-menu-icon-example.vue -->

Custom rendering via slots

Custom rendering for each menu item or each group is possible using scoped slots.

Scoped menu item slots give you greater control over how the menu items appear. You can use scoped slots to provided custom rendering for a particular menu item. Scoped menu item slots for menu items use the following naming syntax:

'item(' + item value + ')' for custom menu item content (custom HTML for the whole menu item block)
'item-label(' + item value + ')' for custom menu item label content (where items.text prop is rendered)

You can use the default fall-back scoped slots 'item()' and 'item-label()' to format any menu items that do not have an explicit scoped slot provided.

If item() or item({key}) slots are used, the corresponding 'item-label()' and 'item-label({key})' slots will not be shown.

<template>
  <div>
    <wui-button id="btn-example-item-scoped-slots" @click="showMenu = true"
      >Open dialog menu</wui-button
    >
    <wui-dialog-menu
      :items="items"
      target="btn-example-item-scoped-slots"
      v-model="showMenu"
      @selected="handleSelectedEvent"
    >
      <!-- A custom formatted menu item -->
      <template #item(item_1)="{ item, itemIndex }">
        <div class="display--flex">
          <strong :data-index="itemIndex">{ item.text }</strong>
        </div>
      </template>

      <!-- Optional default menu item scoped slot for all items -->
      <template #item()="{ item, itemIndex }">
        <div class="display--flex">
          <span :data-index="itemIndex"
            >{ item.text } (#{ parseInt(itemIndex + 1, 10) })</span
          >
        </div>
      </template>

      <!-- A custom formatted menu item label -->
      <template #item-label(item_2)="{ item, itemIndex }">
        <strong :data-index="itemIndex">{ item.text }</strong>
      </template>

      <!-- Optional default menu item label scoped slot for all labels -->
      <template #item-label()="{ item, itemIndex }">
        <i :data-index="itemIndex">{ item.text }</i>
      </template>
    </wui-dialog-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showMenu: false,
        items: [
          { text: "Menu item 1", value: "item_1" },
          { text: "Menu item 2", value: "item_2" },
          { text: "Menu item 3", value: "item_3" },
        ],
      };
    },
    methods: {
      handleSelectedEvent(value) {
        console.log("value", value);
      },
    },
  };
</script>

<!-- wui-dialog-menu-slots-items-example.vue -->

Scoped group slots for menu groups use the following naming syntax:

'group(' + group key + ')' for custom group content (area where the dialog menu items are rendered)
'group-header(' + group key + ')' for custom group header content. Also removes the right expansion icon
'group-label(' + group key + ')' for custom group label content

You can use the default fall-back scoped slot 'group()', 'group-header()' and 'group-label()' to format any menu group that do not have an explicit scoped slot provided.

If 'group()' or 'group({key})' slots are used, the corresponding 'group-header()', 'group-header({key})', 'group-label()' and 'group-label({key})' slots will not be shown. If 'group-header()' or 'group-header({key})' slots are used, the corresponding 'group-label()' and 'group-label({key})' slots will not be shown.

<template>
  <div>
    <wui-button id="btn-example-group-scoped-slots" @click="showMenu = true"
      >Open dialog menu</wui-button
    >
    <wui-dialog-menu
      :groups="groups"
      target="btn-example-group-scoped-slots"
      v-model="showMenu"
      @selected="handleSelectedEvent"
    >
      <!-- A custom formatted menu group -->
      <template #group(group_1)="{ group, index }">
        <strong class="display--block">Choose one of those options:</strong>
        <wui-dialog-menu-item
          v-for="item in group.items"
          :key="item.value"
          :value="item.value"
          :icon="item.icon"
          :keys="item.keys"
          :aria-label="item.text"
          :disabled="item.disabled"
          @click="handleCustomSelectEvent"
        />
      </template>

      <!-- Optional default menu group scoped slot for all groups -->
      <template #group()="{ group, index }">
        <div class="my-custom-class">
          <wui-dialog-menu-item
            v-for="item in group.items"
            :key="item.value"
            :value="item.value"
            :icon="item.icon"
            :keys="item.keys"
            :aria-label="item.text"
            :disabled="item.disabled"
            @click="handleCustomSelectEvent"
          />
        </div>
      </template>

      <!-- A custom formatted menu group header -->
      <template
        #group-header(group_2)="{ group, index, collapsed, toggleGroup }"
      >
        <div class="display--flex">
          <strong :data-index="index">{ group.label }</strong>
          <!-- Custom expansion icon which on-click calls scoped function 'toggleGroup()' -->
          <i
            class="fas"
            :class="{ 'fa-chevron-down': collapsed, 'fa-chevron-up': !collapsed }"
            @click="toggleGroup"
          />
        </div>
      </template>

      <!-- Optional default menu group label scoped slot for all group headers -->
      <template #group-header()="{ group, index, collapsed, toggleGroup }">
        <div class="display--flex" :data-index="index">
          <component :is="collapsed ? 'span' : 'strong'"
            >{ group.label } ({ group.items.length })</component
          >
          <i
            v-if="group.collapsible"
            class="fas"
            :class="{ 'fa-chevron-down': collapsed, 'fa-chevron-up': !collapsed }"
            @click="toggleGroup"
          />
        </div>
      </template>

      <!-- A custom formatted menu group label -->
      <template #group-label(group_3)="{ group, index }">
        <strong :data-index="index">{ group.label }</strong>
      </template>

      <!-- Optional default menu group label scoped slot for all group labels -->
      <template #group-label()="{ group, index }">
        <i :data-index="index">{ group.label }</i>
      </template>
    </wui-dialog-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showMenu: false,
        groups: [
          {
            key: "group_1",
            label: "Group 1",
            items: [
              { text: "G1 - Menu item 1", value: "group_1_item_1" },
              { text: "G1 - Menu item 2", value: "group_1_item_2" },
            ],
          },
          {
            key: "group_2",
            label: "Group 2",
            items: [
              { text: "G2 - Menu item 1", value: "group_2_item_1" },
              { text: "G2 - Menu item 2", value: "group_2_item_2" },
            ],
          },
          {
            key: "group_3",
            label: "Group 3",
            items: [
              { text: "G3 - Menu item 1", value: "group_3_item_1" },
              { text: "G3 - Menu item 2", value: "group_3_item_2" },
            ],
          },
        ],
      };
    },
    methods: {
      handleSelectedEvent(value) {
        console.log("value", value);
      },
      handleCustomSelectEvent(value) {
        // Do custom stuff here ...
        console.log("value", value);
      },
    },
  };
</script>

<!-- wui-dialog-menu-slots-groups-example.vue -->

Custom content at the top and bottom

With the slots start and end you can insert content at the beginning and at the end of the dialog menu:

<template>
  <div>
    <wui-button id="btn-example-slots-start-end" @click="showMenu = true"
      >Open dialog menu</wui-button
    >
    <wui-dialog-menu
      :items="items"
      target="btn-example-slots-start-end"
      v-model="showMenu"
      @selected="handleSelectedEvent"
    >
      <template #start><h5>Choose an option:</h5></template>
      <template #end
        ><span class="text-muted"
          >Some options are not available due to your filter settings</span
        ></template
      >
    </wui-dialog-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showMenu: false,
        items: [
          { text: "Menu item 1", value: "item_1" },
          { text: "Menu item 2", value: "item_2" },
          { text: "Menu item 3", value: "item_3" },
        ],
      };
    },
    methods: {
      handleSelectedEvent(value) {
        console.log("value", value);
      },
    },
  };
</script>

<!-- wui-dialog-menu-slots-start-end-example.vue -->

Using the default slot and the helper components wui-dialog-menu-group and wui-dialog-menu-item you can build a completely custom dialog menu.

Note: searching and keyboard navigation will not work when using the `default` slot.

<template>
  <div>
    <wui-button id="btn-example-slots-default" @click="showMenu = true"
      >Open dialog menu</wui-button
    >
    <wui-dialog-menu
      :items="items"
      target="btn-example-slots-default"
      v-model="showMenu"
    >
      <wui-dialog-menu-group label="Group 1" collapsible>
        <wui-dialog-menu-item
          label="G1 - Menu item 1"
          value="item_1"
          @click="handleSelectedEvent"
        />
        <wui-dialog-menu-item
          label="G1 - Menu item 2"
          value="item_2"
          @click="handleSelectedEvent"
        />
      </wui-dialog-menu-group>

      <wui-dialog-menu-group label="Group 2" separator>
        <wui-dialog-menu-item
          label="G2 - Menu item 3"
          value="item_3"
          @click="handleSelectedEvent"
        />
        <wui-dialog-menu-item
          label="G2 - Menu item 4"
          value="item_4"
          @click="handleSelectedEvent"
        />
      </wui-dialog-menu-group>

      <wui-dialog-menu-item
        label="Menu item 5"
        value="item_5"
        @click="handleSelectedEvent"
      />
      <wui-dialog-menu-item
        label="Menu item 6"
        value="item_6"
        @click="handleSelectedEvent"
      />
    </wui-dialog-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showMenu: false,
        items: [
          { text: "Menu item 1", value: "item_1" },
          { text: "Menu item 2", value: "item_2" },
          { text: "Menu item 3", value: "item_3" },
        ],
      };
    },
    methods: {
      handleSelectedEvent(value) {
        console.log("value", value);
        this.showMenu = false;
      },
    },
  };
</script>

<!-- wui-dialog-menu-slots-default-example.vue -->

Accessibility

Since wui-dialog-menu uses wui-popup under the hood, the same accessibility features apply (see wui-popup docs).

Note: The animation effect of this component is dependent on the prefers-reduced-motion media query.

The aria-activedescendant for groups and aria-label, aria-disabled and aria-haspopup attributes for items will appear on the dialog menu automatically.

The aria-label is applied to each dialog menu item. The value is the text property of the current item object or the label prop when the dialog-menu-item is used.
The aria-disabled is applied to each dialog menu item only if the disabled property of the current item object is set to true or when the disabled of the dialog-menu-item is used.
aria-haspopup is applied to each dialog menu item only if there is a sub menu configuration for the related menu item.
The aria-activedescendant attribute will appear on the groups wrapper with the id of the current active menu item.

Auto focus on open

<wui-dialog-menu> will autofocus the dialog menu list wrapper when opened. If searchbar is set to true, the search input field will be focused instead. In addition, the active state is set for the first dialog menu item.

Returning focus to the triggering element

See wui-popup docs.

Keyboard navigation is possible with the up and down arrow keys, selection of a menu item is possible with ENTER.

Component reference

Properties

Property	Type	Default	Description
`aria-label`	`String`		Optional aria-label which will be added to the suggestion list element
`body-bg-variant`	`String`		Applies one of the WUI theme color variants to the body background
`body-class`	`Array`, `Object` or `String`		CSS class (or classes) to apply to the '.wui-popup__body' wrapper element
`body-text-variant`	`String`		Applies one of the WUI theme color variants to the body text
`flip`	`Boolean`	`false`	Whether or not the `flip` option should be applied to @floating-ui's middleware
`groups`	`Array`	`[]`	An array of groups that group one or more menu items together
`id`	`String`		Id attribute which will be applied to the dialog-menu wrapper element
`items`	`Array`	`[]`	Array of menu items
`list-wrapper-class`	`Array`, `Object` or `String`		CSS class (or classes) to apply to the list wrapper element
`offset`	`Number` or `String`	`0`	Options for @floating-ui's `offset` middleware
`placement`	`String`	`"bottom-start"`	One of @floating-ui's placement options (see https://floating-ui.com/docs/computePosition#placement)
`query`	`String`	`""`	The search term to be displayed in the input field. Visible only if `searchbar` is set to `true`
`return-focus`	`HTMLElement`, `Object` or `String`		HTML Element reference, CSS selector, or component reference to return focus to when the popup closes. When not set, will return focus to the element that last had focus before the popup opened
`searchbar`	`Boolean` or `Object`	`false`	When set to `true`, a search bar is rendered at the top of the list. You can overwrite the input's placeholder text by passing an object instead: `searchbar="{ placeholder: 'custom placeholder text' }"`
`shift`	`Boolean` or `Object`	`false`	Options for @floating-ui's `shift` middleware
`static`	`Boolean`	`false`	Renders the content of the component in-place in the DOM, rather than portalling it to be appended to the body element
`target`	`HTMLElement`, `SVGElement`, `Function`, `Object` or `String`	`undefined`	Element string ID, or a reference to an element or component, that you want to trigger the dialog menu
`translations`	`String`	`default`	The translation object to pass custom texts
`visible` v-model	`Boolean`	`false`	The current visibility state of the dialog menu

`v-model`

Property	Event
`visible`	`change`

Slots

Name	Scoped	Description
`default`	No	Content to place in the dialog menu. All 'item' and 'group' slots will be ignored
`end`	No	Content to place at the bottom of the dialog menu
`group()`	Yes	Default scoped slot for custom rendering of menu group content. Optionally scoped. Only available if `groups` prop is used
`group({key})`	Yes	Scoped slot for custom rendering of menu group content. '{key}' is the groups's key identifier. Optionally scoped. Only available if `groups` prop is used
`group-header()`	Yes	Default scoped slot for entire menu group header container contents. Also removes the right expansion icon. Optionally scoped. Only available if `groups` prop is used
`group-header({key})`	Yes	Entire menu group header container contents. '{key}' is the groups's key identifier. Optionally scoped. Only available if `groups` prop is used
`group-label()`	Yes	Default scoped slot for dialog menu label. If `group-header()` or `group-header({key})` slot is used, this slot will not be shown. Optionally scoped. Only available if `groups` prop is used
`group-label({key})`	Yes	Scoped slot for custom rendering of menu group label content. '{key}' is the groups's key identifier. If `group-header()` or `group-header({key})` slot is used, this slot will not be shown. Optionally scoped. Only available if `groups` prop is used
`item()`	Yes	Default scoped slot for custom rendering of menu item content. Optionally scoped
`item({key})`	Yes	Scoped slot for custom rendering of menu item content. '{key}' is the items's value identifier. Optionally scoped
`item-label()`	Yes	Default scoped slot for custom rendering of menu item label content. If `item()` or `item({key})` slot is used, this slot will not be shown. Optionally scoped
`item-label({key})`	Yes	Scoped slot for custom rendering of menu item label content. '{key}' is the items's value identifier. If `item()` or `item({key})` slot is used, this slot will not be shown. Optionally scoped
`start`	No	Content to place at the top of the dialog menu. Also removes the searchbar

Scope for item* slots

Method or Property	Type	Description
`active`	`Boolean`	Whether or not this menu item is in active state
`item`	`Object`	The current item object
`itemIndex`	`Number`	The menu item's index (zero-based) in the list of menu items
`groupIndex`	`Number`	The group's index (zero-based) in the list of group items. Only available if `groups` prop is used

Scope for group* slots

Method or Property	Type	Description
`group`	`Array`	The current group object
`index`	`Number`	The group's index (zero-based) in the list of group items
`collapsed`	`Boolean`	The collapsed state of the current group
`showGroup`	`Function`	Scoped function to expand the menu items of the current group
`hideGroup`	`Function`	Scoped function to collapse the menu items of the current group
`toggleGroup`	`Function`	Scoped function to toggle the collapsed state of the current group

Events

Event	Arguments	Description
`change`	`visible` - `Boolean` - The visibility state of the dialog menu. `true` if the dialog menu is visible and `false` if not visible	New dialog menu's visibility state. Used to update the v-model
`query-change`	`query` - `String` - Current value of the search input	Emitted when the query has changed by user interaction
`selected`	`value` - `String` - The value of the selected menu item `event` - `PointerEvent` or `KeyboardEvent` - Native PointerEvent or KeyboardEvent	Always emits when the user made a selection, either by click or keyboard
`show`	`wvPopupEvent` - WvPopupEvent object. Call `wvPopupEvent.preventDefault()` to cancel show	Always emits just before dialog menu is shown. Cancelable
`shown`	`wvPopupEvent` - WvPopupEvent object	Always emits when dialog menu is shown

`<wui-dialog-menu-group>`

<wui-dialog-menu-group> Properties
<wui-dialog-menu-group> v-model
<wui-dialog-menu-group> Slots
<wui-dialog-menu-group> Events

Properties

Property	Type	Default	Description
`collapsed` v-model	`Boolean`	`false`	Whether or not the menu items list of this group is collpased
`collapsible`	`Boolean`		Whether or not the menu items list can be collapsed or not. If `true` an icon will be rendered next to the group label and becomes interactive together with the group label
`id`	`String`		Id which will be used to generate a unique id for the group wrapper element
`items`	`Array`	`[]`	Array of menu items
`label`	`String`		Displayed name of the group
`selected`	`String`		The value of the selected menu item in this group
`separator`	`Boolean`	`false`	If `true`, renders a horizontal grey line at the end of the group

`v-model`

Property	Event
`collapsed`	`collapsed`

Slots

Name	Scoped	Description
`default`	Yes	Content to place in the dialog menu group
`header`	Yes	Content to place in the dialog group header. Also removes the right expansion icon
`item()`	Yes	Default scoped slot for custom rendering of menu item content. Optionally scoped
`item({key})`	Yes	Scoped slot for custom rendering of menu item content. '{key}' is the items's value identifier. Optionally scoped
`item-label()`	Yes	Default scoped slot for custom rendering of menu item label content. If `item()` or `item({key})` slot is used, this slot will not be shown. Optionally scoped
`item-label({key})`	Yes	Scoped slot for custom rendering of menu item label content. '{key}' is the items's value identifier. If `item()` or `item({key})` slot is used, this slot will not be shown. Optionally scoped
`label`	Yes	The dialog group label in the header. If `header` slot is used, this slot will not be shown

Slot scope for `item()`, `item({key})`,`item-label()` and `item-label({key})`

Method or Property	Type	Description
`item`	`Object`	The current item object
`itemIndex`	`Number`	The menu item's index (zero-based) in the list of menu items

Slot scope for `default`, `header` and `label`

Method or Property	Type	Description
`collapsed`	`Boolean`	The current collapsed state
`show`	`Function`	Scoped function to expand the menu items
`hide`	`Function`	Scoped function to collapse the menu items
`toggle`	`Function`	Scoped function to toggle the collapsed state

Events

Event	Arguments	Description
`collapsed`	`collapsed` - `Boolean` - The value of the `collapsed` prop (`true` or `false`)	Always emits when the collapsed state has changed
`selected`	`value` - `String` - The value of the selected menu item `event` - `PointerEvent` or `KeyboardEvent` - Native PointerEvent or KeyboardEvent	Always emits when the user made a selection, either by click or keyboard

`<wui-dialog-menu-item>`

<wui-dialog-menu-item> Properties
<wui-dialog-menu-item> Slots
<wui-dialog-menu-item> Events

Properties

Property	Type	Default	Description
`active`	`Boolean`	`false`	Whether or not this item is active
`aria-disabled`	`Boolean`	`false`	The diabled state applied to the `aria-disabled` attribute
`aria-haspopup`	`Boolean`	`false`	Indicates the availability and type of interactive popup element that can be triggered by this meu item. Value will be applied to the `aria-haspopup` attribute
`aria-label`	`String`		The label of this menu item applied to the `aria-label` attribute
`disabled`	`Boolean`	`false`	Whether or not this menu item is disabled
`icon`	`String`, `Array` or `Object`		The name of the Font Awesome icon which should be rendered at the start of this menu item
`id`	`String`		Id which will be used to generate a unique id for the wrapper element
`keys`	`String` or `Array`	`[]`	The keyboard shortcut, if available. Can be a string or an array of one or more alphanumeric characters. Will be rendered at the end of the menu item with a `'+'` as a seperator between all characters
`label`	`String`	`""`	The displayed label of this menu item
`role`	`String`	`"menuitem"`	The value of the `role` attribute
`tabindex`	`String` or `Number`		The value of the `tab-index` attribute
`value`	`Number` or `String`	`""`	The unique value of this menu item

Slots

Name	Scoped	Description
`default`	No	Content to place for the whole item. Will replace 'start', 'end' and 'label' slots
`end`	No	Content to place at the end of a menu item, just after the menu item text
`label`	No	Content to display as the label
`start`	No	Content to place at the beginning of a menu item, just before the menu item text

Events

Event	Arguments	Description
`click`	`value` - The value of this menu item `event` - `PointerEvent` or `KeyboardEvent` - Native PointerEvent or KeyboardEvent	Always emits when the user clicks on this element

Importing individual components

You can import individual components into your project via the following named exports:

Component	Named Export
`<wui-dialog-menu>`	`WuiDialogMenu`
`<wui-dialog-menu-group>`	`WuiDialogMenuGroup`
`<wui-dialog-menu-item>`	`WuiDialogMenuItem`

Example

import { WuiDialogMenu } from "@wui/wui-vue/lib/dialog-menu";
Vue.component("wui-dialog-menu", WuiDialogMenu);

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named Export	Import Path
`DialogMenuPlugin`	`@wui/wui-vue/lib/dialog-menu`

Example

import { DialogMenuPlugin } from "@wui/wui-vue/lib/dialog-menu";
Vue.use(DialogMenuPlugin);

From WUI and

with

WUI is wescale’s design system

Dialog menu

The dialog menu component shows a menu at the position of the element used to activate it.

Basic example

With searchbar

With icons

With keyboard shortcuts

Groups

Description

Target

Toggle dialog menu visibility

Using v-w-dialog-menu directive

Using show(), hide(), and toggle() component methods

Using v-model property

Items

Groups (grouped menu items)

Dialog menu with search field

Menu item display options

Menu item icon

Menu item keyboard shortcuts

Custom rendering via slots

Menu items custom rendering via scoped slots

Menu groups custom rendering via scoped slots

Custom content at the top and bottom

Custom dialog menu via default slot

Accessibility

Dialog menu ARIA attributes

Auto focus on open

Returning focus to the triggering element

Keyboard navigation

Component reference

<wui-dialog-menu>

Properties

v-model

Slots

Scope for item* slots

Scope for group* slots

Events

<wui-dialog-menu-group>

Properties

v-model

Slots

Slot scope for item(), item({key}),item-label() and item-label({key})

Slot scope for default, header and label

Events

<wui-dialog-menu-item>

Properties

Slots

Events

Importing individual components

Importing as a Vue.js plugin

Using `v-w-dialog-menu` directive

Using `show()`, `hide()`, and `toggle()` component methods

Using `v-model` property

`<wui-dialog-menu>`

`v-model`

`<wui-dialog-menu-group>`

`v-model`

Slot scope for `item()`, `item({key})`,`item-label()` and `item-label({key})`

Slot scope for `default`, `header` and `label`

`<wui-dialog-menu-item>`