Skip to content

Menu

The VMenu component is a navigation menu that can be used to display a hierarchy of links and submenus. It can be customized through props to change its appearance and behavior.

Usage

To use the VMenu component, you need to pass it an object that describes the structure and content of the menu. This object should conform to the Menu interface, which has the following shape:

ts
interface Menu {
  text: string;
  to?: string;
  icon?: string;
  children?: Menu[];
}
interface Menu {
  text: string;
  to?: string;
  icon?: string;
  children?: Menu[];
}
  • text is the label that will be displayed for the menu item.
  • to is an optional URL that the menu item will link to.
  • icon is an optional icon that will be displayed next to the menu item. It can be specified using a string that follows the Ricon or Material Design Icon syntax.
  • children is an optional array of child Menu objects that will be displayed as submenus under the current menu item.

Basic Usage

Here is an example of how to use the VMenu component with a basic menu object:

Variants

The VMenu component supports several variations that can be enabled by passing boolean props:

  • small: Makes the menu items smaller and reduces the padding.
  • mini: Makes the menu items even smaller and reduces the padding even more.
  • expandHover: Makes submenus expand on hover instead of on click.
  • dark: Switches the menu to a dark mode with a black background and white text.

Here is an example of how to use the small variant:

Small

Use small prop to make the menu items smaller and reduces the padding.

Mini

Use mini prop to make the menu items even smaller and reduces the padding even more.

Custom Active Class

By default, the VMenu component applies a blue background and white text to the active menu item. You can customize this behavior by passing a different active-class prop:

Icons

You can use icons in the VMenu component by specifying the icon prop for each menu item. The icon prop should be a string that follows the Icones syntax.

Props

NameTypeDefault
menuObject as PropType<Menu>null
miniBooleanfalse
expandHoverBooleanfalse
darkBooleanfalse
colorString''
bgColorString''
darkColorString''
darkBgColorString''
classMenuParentString'text-primary-500 bg-gray-700'
smallBooleanfalse

Events

None

Slots

None

CSS Variables

None

Standalone Installation

You can also install the Menu component individually via @morpheme/menu package:

bash
npm i @morpheme/menu
npm i @morpheme/menu
vue
<script setup lang="ts">
import VMenu from '@morpheme/menu';
</script>

<template>
  <VMenu :menu="{text: 'Hello World'}" />
</template>
<script setup lang="ts">
import VMenu from '@morpheme/menu';
</script>

<template>
  <VMenu :menu="{text: 'Hello World'}" />
</template>

Storybook

View Storybook documentation here.