skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

n-dropdown

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
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-dropdown
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
8

naive-ui-i18n

Configure Naive UI internationalization with NConfigProvider and createLocale for Vue 3 apps.

Community
Advanced
spqwspqw

observable-framework-input-select

Generate a select dropdown input component for Observable Framework applications.

Community
Basic
PeakTaiPeakTai

wok-ui-dropdown

Create interactive dropdown and dropup menus for wok-ui applications.

Community
Intermediate
jiaiyanjiaiyan
8

n-alert

Display contextual alert messages with lifecycle management for Naive UI in Vue 3.

Community
Intermediate