Morpheme

Appearance

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.