Colorffy
Components

Popover Menu

A popover menu with a header, avatar, and navigation items.

UiPopoverMenu shows a dropdown panel with an optional user header (title, subtitle, avatar) and a list of navigation items.

Add a popover menu

<script setup lang="ts">
import type { INavItem } from '@colorffy/ui'
import { ref } from 'vue'

const open = ref(false)
const menuItems: INavItem[] = [
  { id: 'settings', to: '/settings', icon: '&#xe8b8;', text: 'Settings', ariaLabel: 'Settings' },
  { id: 'logout', to: '/logout', icon: '&#xe9ba;', text: 'Log out', ariaLabel: 'Log out' },
]
</script>

<template>
  <UiPopoverMenu
    :is-opened="open"
    :menu-items="menuItems"
    title="Jane Doe"
    subtitle="jane@example.com"
    avatar-url="/jane.jpg"
    @hide-dropdown="open = false"
    @menu-item-click="to => navigateTo(to)"
  />
</template>

Props

PropTypeDefaultDescription
isOpenedbooleanfalseShow / hide the menu.
menuItemsINavItem[]—Menu entries.
title / subtitlestring | null—Header text.
avatarUrlstring | null—Header avatar image.
currentRoute{ path?, name? } | null—For active-link detection (pass useRoute()).
user{ displayName, email, photoURL } | null—Convenience user object.

Emits: hideDropdown, menuItemClick(to).

Popover

An anchored popover panel built on the native Popover API and CSS anchor positioning.

Progress

Indicate progress with UiProgressBar and UiProgressSpinner.

Copyright © 2026