This component implements a reusable, customizable dropdown menu that can be positioned anywhere in the application. It uses PrimeVue's Menu component with enhanced functionality for flexible application across different use cases.

Component Structure

The component consists of:

  • A PrimeVue Menu component with popup functionality
  • Custom templates for rendering menu items with icons
  • Toggle logic for controlling menu visibility
<Menu
  ref="op"
  id="overlay_menu"
  :popup="true"
  :model="items"
  :pt="{ root: { style: 'right: 0px; left: auto; top:56px; position:fixed ' } }"
>

<template #item="{ item, props }">
  <NuxtLink
    v-if="item.route"
    :to="item.route"
    v-bind="props.action"
    class="flex items-center"
    @click="closeAllNavs"
  >
    <CustomIcon v-if="item.icon" :name="item.icon" />
    <span class="ml-2">{{ item.label }}</span>
  </NuxtLink>
  <a
    v-else
    :href="item.url"
    :target="item.target"
    v-bind="props.action"
    class="flex items-center"
    @click="closeAllNavs"
  >
    <CustomIcon v-if="item.icon" :name="item.icon" />
    <span class="ml-2">{{ item.label }}</span>
  </a>
</template>
</Menu>


<script>
const op = ref(null); // Reference to the menu component

const toggle = (event) => {
  closeAllNavs(); // Close any other open navigation elements
  onBtnDirection.value = !onBtnDirection.value; // Toggle direction indicator
  op.value.toggle(event); // Show/hide the menu
};



const menuItems = ref([
  { label: "View", icon: "eye", route: "/view" },
  { label: "Edit", icon: "pencil", route: "/edit" },
  { label: "Delete", icon: "trash", command: () => confirmDelete() },
]);

// Reference to menu component
const menuRef = ref(null);

// Toggle function
const toggleMenu = (event) => {
  menuRef.value.toggle(event);
};
</script>

Items are defined in an array with the following structure:

const items = ref([
  {
    label: 'Item Text',     // Text to display
    icon: 'icon_name',      // Optional icon to display
    route: '/route/path',   // For internal routing (uses NuxtLink)
    url: 'https://...',     // For external links (uses anchor tag)
    target: '_blank',       // Target for external links
    command: () => {...}    // Function to execute when clicked
  }
])
Edit this page on GitHub
Table of Contents