Menu

Accessible dropdown menu. Can be used as a list of buttons, links, checkboxes or radios.

Config

The options below are to be set in the global configuration at the following location:

{
    components: {
        menu: {
            class: ({ open }) => {},
        },
        menuBtn: {
            class: ({ disabled, active }) => {},
        },
        menuList: {
            class: () => {},
            transition: {},
        },
        menuItem: {
            class: ({ role, selected }) => {},
        },
        menuLink: {
            class: () => {},
        },
        menuSeparator: {
            class: () => {},
        },
    },
}

All components

class

Classes applied to the component root element, except when the prop bare is set to true. See styling components.

  • type: Array<String | Object> | Object | String | (props: Object) => {}
  • default: null
Example

Using the CMenuItem component:

class({ role, selected }) {
    return ['menu-item', {
        'menu-item--selected': selected,
        'menu-item--checkbox': role === 'menuitemcheckbox',
        'menu-item--radio': role === 'menuitemradio',
    }]
}

CMenuList

transition

Apply a common transition to all menu lists. The object can contain any Vue built-in transition component propsopen in new window.

  • type: object
  • default: null
Example
{ name: 'fade', mode: 'out-in' }

API

NameTypeDefaultDescription
Props
variant RawVariantundefined

Useful when used in the component config class option, to style it conditionally. See styling components.

bare booleanfalse

Disable class inheritance from the component config. See styling components.

modelValue anyundefined

Bind the Menu value with the parent component.

open booleanfalse

Bind the MenuList opening state with the parent component.

disabled booleanfalse

Prevent opening the menu.

multiple booleanfalse

Allow to select multiple items within the menu.

Events
update:modelValue
When the selected value(s) change.
ArgumentTypeDescription
valueany

The selected item value, or an array of selected items values when multiple is true.

update:open
When the popup opens or closes.
ArgumentTypeDescription
openboolean

Whether the popup is open or not.

Slots
default
Binding nameTypeDescription
openboolean

Whether the popup is open or not.

Examples

Simplest

Manually handle the item behavior using the select event.

<CMenu>
  <CMenuBtn>Toggle menu</CMenuBtn>
  <CMenuList>
    <CMenuItem @select="() => { /* Do something */ }">Item 1</CMenuItem>
    <CMenuItem @select="() => { /* Do something */ }">Item 2</CMenuItem>
  </CMenuList>
</CMenu>

Navigate to the given route. You can replace to by href for regular links.

<CMenu>
  <CMenuBtn>Toggle menu</CMenuBtn>
  <CMenuList>
    <CMenuLink to="/url-1">Link 1</CMenuLink>
    <CMenuLink to="/url-2">Link 2</CMenuLink>
  </CMenuList>
</CMenu>

Selectable

Let the user select one of the items and update the v-model accordingly.

<template>
  <CMenu v-model="value">
    <CMenuBtn>Choose your weapon</CMenuBtn>
    <CMenuList>
      <CMenuItem
        v-for="item in items"
        :key="item.value"
        :value="item.id"
        :disabled="item.disabled"
      >
        {{ item.label }}
      </CMenuItem>
    </CMenuList>
  </CMenu>
</template>

<script setup>
import { ref } from 'vue';

const value = ref(null);
const items = [
  {
    label: 'Banana',
    id: 1,
  },
  {
    label: 'Apple',
    id: 2,
  },
  {
    label: 'Bananapple',
    id: 3,
    disabled: true,
  },
];
</script>

Multi selectable

Let the user select many items and update the v-model accordingly. In this scenario the value must be an array.

<template>
  <CMenu v-model="value" multiple>
    <CMenuBtn>Choose your weapons</CMenuBtn>
    <CMenuList>
      <CMenuItem
        v-for="item in items"
        :key="item.value"
        :value="item.id"
        :disabled="item.disabled"
      >
        {{ item.label }}
      </CMenuItem>
    </CMenuList>
  </CMenu>
</template>

<script setup>
import { ref } from 'vue';

const value = ref([]);
const items = [
  {
    label: 'Banana',
    id: 1,
  },
  {
    label: 'Apple',
    id: 2,
  },
  {
    label: 'Bananapple',
    id: 3,
    disabled: true,
  },
];
</script>