n-dropdown

Name: n-dropdown
Availability: InStock
Author: jiaiyan

Create and control contextual dropdown menus for Naive UI components in Vue 3.

8|3|Updated Mar 13, 2026

Search Tags:#vue #keyboard-navigation #dropdown #ui-component #context-menu #cascading #naive-ui

Ready to run

npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-dropdown

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: n-dropdown
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-dropdown
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-dropdown

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Dropdowns provide a straightforward way to present contextual menus, action lists, and cascading selections in Naive UI, reducing UI clutter and improving user interaction.

Core Features & Use Cases

Multiple triggers: hover, click, or manual control for flexible UX
Cascading menus: nested submenus for hierarchical options
Custom rendering: customize labels, icons, and option content
Context menu support: manual positioning and clickoutside handling
Grouping and dividers: organize options for clarity
Keyboard navigation: full keyboard support for accessibility
Placement control: configure popup placement to fit layouts

Quick Start

Create a basic dropdown with options and handle the select event.

Frequently Asked Questions about n-dropdown

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a context menu in Vue 3 using Naive UI?▼

To create a context menu in Vue 3, use this Skill to implement manual positioning, clickoutside handling, and customizable dropdown options within Naive UI applications. It supports flexible triggers for contextual interaction.

Can I build cascading submenus with Naive UI dropdown components?▼

Yes, you can build cascading submenus. The Skill enables nested submenus for hierarchical options, allowing you to organize complex action lists and navigation structures within your Naive UI dropdown.

Does the Naive UI dropdown support keyboard navigation and custom rendering?▼

Yes, Naive UI dropdowns support full keyboard navigation for accessibility and custom rendering hooks. You can customize labels, icons, and option content while maintaining keyboard accessibility.

What triggers can I configure for a Naive UI dropdown menu?▼

You can configure hover, click, or manual triggers for Naive UI dropdown menus. This allows flexible UX control over when contextual menus, action lists, and cascading selections appear.

How do I organize dropdown options using grouping and dividers in Vue?▼

You can organize dropdown options by implementing grouping and dividers. This Skill provides options to structure hierarchical items, ensuring clarity and reducing UI clutter in your Vue 3 application.