Clerri UI

Clerri UI Menu ​

CMenu displays a list of items in vertical orientation.

Basic Usage ​

Menu requires a collection of menuitems as its model.

vue
<template>
  <CMenu :model="items" />
</template>

<script setup lang="ts">
  import { PrimeIcons } from '@primevue/core/api'
  import { ref } from 'vue';
  
  const items = ref([
    { label: 'New', icon: PrimeIcons.PLUS },
    { label: 'Search', icon: PrimeIcons.SEARCH }
  ]);
</script>

Grouped Items ​

CMenu supports single level of grouping by defining children with the items property.

vue
<template>
  <CMenu :model="items" />
</template>

<script setup lang="ts">
  import { PrimeIcons } from '@primevue/core/api'
  
  const items = [
    {
      label: 'Documents',
      items: [
        {
          label: 'New',
          icon: PrimeIcons.PLUS
        },
        {
          label: 'Search',
          icon: PrimeIcons.SEARCH
        }
      ]
    },
    {
      label: 'Profile',
      items: [
        {
          label: 'Settings',
          icon: PrimeIcons.COG
        },
        {
          label: 'Logout',
          icon: PrimeIcons.SIGN_OUT
        }
      ]
    }
  ];
</script>

Separator ​

CMenu supports separator between items by defining a separator item with the property separator set to true .

vue
<template>
  <CMenu :model="items" />
</template>

<script setup lang="ts">
  import { PrimeIcons } from '@primevue/core/api'
  import { ref } from 'vue';
  
  const items = ref([
    { label: 'New', icon: PrimeIcons.PLUS },
    { separator: true },
    { label: 'Search', icon: PrimeIcons.SEARCH }
  ]);
</script>

Overlay mode is enabled by adding popup property and calling toggle function of the menu ref with an event of the target.

vue
<template>
  <CButton 
      :icon="PrimeIcons.ELLIPSIS_V" 
      @click="popupMenu?.toggle"
  />
  <CMenu 
      :model="items" 
      popup 
      ref="popupMenu" 
  />
</template>

<script setup lang="ts">
  import { PrimeIcons } from '@primevue/core/api'
  import { ref } from 'vue';

  const popupMenu = ref<InstanceType<typeof CMenu>>();
  
  const items = ref([
    { label: 'New', icon: PrimeIcons.PLUS },
    { label: 'Search', icon: PrimeIcons.SEARCH }
  ]);
</script>

Command ​

The command property defines the callback to run when an item is activated by click or a key event.

vue
<template>
  <CMenu :model="items" />
</template>

<script setup lang="ts">
  import { PrimeIcons } from '@primevue/core/api'
  
  const commandItems = [
    {
        label: 'New',
        icon: PrimeIcons.PLUS,
        command: () => {
            alert('File Created');
        }
    },
    {
        label: 'Search',
        icon: PrimeIcons.SEARCH,
        command: () => {
            alert('No results found.');
        }
    }
  ]
</script>