Skip to content

Menus

The VMenus component is used for creating navigation menus that are triggered on click or hover.

Usage

Basic Usage

To use the VMenus component, you can pass in an array of items as a prop and include the component in your template. Each item should have a text and a to field, like this:

INFO

The VMenus component is registered globally when you install with @morpheme/ui. So you don't need to import it manually.

Right-Aligned Menus

You can align the menu to the right by passing in the right prop:

Small Menus

To create a smaller version of the menu, pass in the small prop:

You can also use the VMenus component within the VAppBar component:

Slots

In addition to the items prop, the VMenus component also has a slot called items that you can use to define your menu items. For example:

You can also use slots to customize the appearance of the menu label and menu items. For example:

vue
<template>
  <VMenus label="Account">
    <template #label>
      <div class="font-bold text-xl text-gray-900">Account</div>
    </template>
    <template #items>
      <VMenusItem prepend-icon="ri:user-line">
        <template #label>
          <div class="text-lg text-gray-800">Profile</div>
        </template>
      </VMenusItem>
      <VMenusItem prepend-icon="ri:settings-line">
        <template #label>
          <div class="text-lg text-gray-800">Settings</div>
        </template>
      </VMenusItem>
      <VMenusItem prepend-icon="ri:logout-box-line">
        <template #label>
          <div class="text-lg text-gray-800">Logout</div>
        </template>
      </VMenusItem>
    </template>
  </VMenus>
</template>
<template>
  <VMenus label="Account">
    <template #label>
      <div class="font-bold text-xl text-gray-900">Account</div>
    </template>
    <template #items>
      <VMenusItem prepend-icon="ri:user-line">
        <template #label>
          <div class="text-lg text-gray-800">Profile</div>
        </template>
      </VMenusItem>
      <VMenusItem prepend-icon="ri:settings-line">
        <template #label>
          <div class="text-lg text-gray-800">Settings</div>
        </template>
      </VMenusItem>
      <VMenusItem prepend-icon="ri:logout-box-line">
        <template #label>
          <div class="text-lg text-gray-800">Logout</div>
        </template>
      </VMenusItem>
    </template>
  </VMenus>
</template>

Custom Style

You can also customize the menus style using popper-class, items-class, items-style and CSS Properties.

Nested

Here's an example on how to create nested menus.

Dark Mode

Here's a preview of menus in Dark Mode.

Props

NameTypeDefault
itemsVMenuItem[][]
rightBooleanfalse
smallBooleanfalse
rightIconBooleanfalse
btnClassString''
btnIconString'ri:arrow-down-s-line'
btnIconClassString''
placementString. See available options'bottom-start'
labelString'Menu'
ts
export interface VMenuItem {
  icon?: string;
  text: string;
  to?: string;
  onClick?: () => void;
}
export interface VMenuItem {
  icon?: string;
  text: string;
  to?: string;
  onClick?: () => void;
}

INFO

  • ❌ = deprecated
  • propName = deprecated

Events

None

Slots

  • default: used to place menu activator.
vue
<template>
  <VMenus>
    <button>Account</button>
    <template #items>
      <VMenusItem prepend-icon="ri:user-line">Profile</VMenusItem>
      <VMenusItem prepend-icon="ri:settings-4-line"> Preferences </VMenusItem>
      <VMenusItem divider />
      <VMenusItem prepend-icon="ri:logout-box-line">Logout</VMenusItem>
    </template>
  </VMenus>
</template>
<template>
  <VMenus>
    <button>Account</button>
    <template #items>
      <VMenusItem prepend-icon="ri:user-line">Profile</VMenusItem>
      <VMenusItem prepend-icon="ri:settings-4-line"> Preferences </VMenusItem>
      <VMenusItem divider />
      <VMenusItem prepend-icon="ri:logout-box-line">Logout</VMenusItem>
    </template>
  </VMenus>
</template>
  • items: used to place menu items.
vue
<template>
  <VMenus label="Account">
    <template #items>
      <VMenusItem prepend-icon="ri:user-line">Profile</VMenusItem>
      <VMenusItem prepend-icon="ri:settings-4-line"> Preferences </VMenusItem>
      <VMenusItem divider />
      <VMenusItem prepend-icon="ri:logout-box-line">Logout</VMenusItem>
    </template>
  </VMenus>
</template>
<template>
  <VMenus label="Account">
    <template #items>
      <VMenusItem prepend-icon="ri:user-line">Profile</VMenusItem>
      <VMenusItem prepend-icon="ri:settings-4-line"> Preferences </VMenusItem>
      <VMenusItem divider />
      <VMenusItem prepend-icon="ri:logout-box-line">Logout</VMenusItem>
    </template>
  </VMenus>
</template>

CSS Variables

css
:root {
  --v-menus-popper-border-color: var(--color-gray-200);
  --v-menus-popper-border: 1px solid var(--v-menus-popper-border-color);
  /* menus */
  --v-menus-margin-y: var(--size-spacing-0);
  --v-menus-margin-x: var(--size-spacing-0);
  --v-menus-padding-y: var(--size-spacing-1);
  --v-menus-padding-x: var(--size-spacing-1);
  --v-menus-width: var(--size-spacing-56);
  --v-menus-bg-color: var(--color-white);
  --v-menus-border-width: 1px;
  --v-menus-border-style: solid;
  --v-menus-border-color: transparent;
  --v-menus-box-shadow: var(--effect-shadow-sm);
  --v-menus-border-radius: var(--border-radius-lg);
  --v-menus-opacity: 1;

  /* button */
  --v-menus-button-color: var(--color-gray-700);
  --v-menus-button-icon-color: var(--color-gray-500);
  --v-menus-button-icon-width: var(--size-spacing-4);
  --v-menus-button-icon-height: var(--size-spacing-4);

  /* item */
  --v-menus-item-padding-y: var(--size-spacing-2);
  --v-menus-item-padding-x: var(--size-spacing-3);
  --v-menus-item-bg-color: var(--color-transparent);
  --v-menus-item-text-color: var(--color-gray-800);
  --v-menus-item-font-size: var(--size-font-sm);
  --v-menus-item-font-weight: var(--font-weight-regular);
  --v-menus-item-transition: all 0.2s ease-in-out;
  --v-menus-item-text-align: left;
  --v-menus-item-justify-content: flex-start;
  --v-menus-item-gap: var(--size-spacing-4);
  --v-menus-item-border-radius: var(--border-radius-lg);

  /* item hover */
  --v-menus-item-hover-bg-color: var(--color-gray-100);
  --v-menus-item-hover-text-color: var(--color-gray-800);

  /* arrow */
  --v-menus-arrow-border-color: var(--color-white);
}
:root {
  --v-menus-popper-border-color: var(--color-gray-200);
  --v-menus-popper-border: 1px solid var(--v-menus-popper-border-color);
  /* menus */
  --v-menus-margin-y: var(--size-spacing-0);
  --v-menus-margin-x: var(--size-spacing-0);
  --v-menus-padding-y: var(--size-spacing-1);
  --v-menus-padding-x: var(--size-spacing-1);
  --v-menus-width: var(--size-spacing-56);
  --v-menus-bg-color: var(--color-white);
  --v-menus-border-width: 1px;
  --v-menus-border-style: solid;
  --v-menus-border-color: transparent;
  --v-menus-box-shadow: var(--effect-shadow-sm);
  --v-menus-border-radius: var(--border-radius-lg);
  --v-menus-opacity: 1;

  /* button */
  --v-menus-button-color: var(--color-gray-700);
  --v-menus-button-icon-color: var(--color-gray-500);
  --v-menus-button-icon-width: var(--size-spacing-4);
  --v-menus-button-icon-height: var(--size-spacing-4);

  /* item */
  --v-menus-item-padding-y: var(--size-spacing-2);
  --v-menus-item-padding-x: var(--size-spacing-3);
  --v-menus-item-bg-color: var(--color-transparent);
  --v-menus-item-text-color: var(--color-gray-800);
  --v-menus-item-font-size: var(--size-font-sm);
  --v-menus-item-font-weight: var(--font-weight-regular);
  --v-menus-item-transition: all 0.2s ease-in-out;
  --v-menus-item-text-align: left;
  --v-menus-item-justify-content: flex-start;
  --v-menus-item-gap: var(--size-spacing-4);
  --v-menus-item-border-radius: var(--border-radius-lg);

  /* item hover */
  --v-menus-item-hover-bg-color: var(--color-gray-100);
  --v-menus-item-hover-text-color: var(--color-gray-800);

  /* arrow */
  --v-menus-arrow-border-color: var(--color-white);
}

Standalone Installation

You can also install the Menus component individually via @morpheme/menus package:

bash
# with npm
npm install @morpheme/menus
# or with yarn
yarn add @morpheme/menus
# or with pnpm
pnpm add @morpheme/menus
# with npm
npm install @morpheme/menus
# or with yarn
yarn add @morpheme/menus
# or with pnpm
pnpm add @morpheme/menus
vue
<script setup lang="ts">
import VMenus from '@morpheme/menus';
</script>

<template>
  <VMenus />
</template>
<script setup lang="ts">
import VMenus from '@morpheme/menus';
</script>

<template>
  <VMenus />
</template>

Storybook

View Storybook documentation here.