skills.rest
tokijh
tokijhCOMMUNITY
Explore all skills by this author →
GitHub

use-design-system/Menu

Implement accessible dropdown menus with keyboard navigation for React applications.

Updated Aug 27, 2026
Search Tags:#accessibility#react#design system#ui component#menu#dropdown
One-click install
npx skills add https://github.com/tokijh/minapp --skill use-design-system-menu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-design-system/Menu
Source: https://github.com/tokijh/minapp/tree/main/.claude/skills/use-design-system/subskills/Menu
Command: npx skills add https://github.com/tokijh/minapp --skill use-design-system-menu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a robust and accessible way to implement dropdown menus in user interfaces, enhancing navigation and user interaction.

Core Features & Use Cases

  • Dropdown Menus: Create context menus, action menus, and selection menus.
  • Accessibility: Supports keyboard navigation (Arrow keys, Enter, Escape) and ARIA attributes.
  • Customization: Offers options for different item types (standard, checkable, danger), icons, and sections.
  • Controlled Mode: Allows external management of the menu's open/closed state.
  • Use Case: Displaying a list of actions (Edit, Delete, Share) when a user clicks a "more options" button.

Quick Start

Use the use-design-system/Menu skill to create a dropdown menu with 'Edit' and 'Delete' options.

Frequently Asked Questions about use-design-system/Menu

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

FAQPage Schema
How do I build an accessible dropdown menu in React?▼

To build an accessible dropdown menu in React, use a component that supports keyboard navigation, ARIA attributes, and portal rendering. This ensures interactive menus are usable via Arrow keys, Enter, and Escape.

Can I manage the open state of a dropdown menu externally?▼

Yes, you can manage the open state of a dropdown menu externally using controlled state management. This allows your application to programmatically dictate when the menu opens or closes based on user interactions.

What types of items can I include in a React dropdown menu?▼

You can include various item types in a React dropdown menu, such as standard actions, checkable items, danger options, and grouped sections. Icons can also be customized for each item.

Does this dropdown menu component support keyboard navigation?▼

Yes, this dropdown menu component fully supports keyboard navigation. Users can navigate through menu items using Arrow keys, select items with Enter, and dismiss the menu with the Escape key.

What is the best way to render a dropdown menu outside the DOM hierarchy?▼

The best way to render a dropdown menu outside the DOM hierarchy is by using portal rendering. This prevents parent container overflow or z-index issues from clipping the menu display.

Related Skills

Explore More Software Engineering Skills→
lihonghuacgklihonghuacgk

context-menu

Define and render context menus with nested submenus and checkable items in Wave Terminal.

Community
Intermediate
Yoriichi-DangYoriichi-Dang

tanstack-query-best-practices

Structure TanStack Query data fetching, caching, and server state in React applications.

Community
Advanced
yikZeroyikZero

design-engineering

Guide frontend teams to adopt a cohesive motion design framework for UI components.

Community
Advanced
kriscendobotkriscendobot
3

native-customizable-form-control-styling

Style native HTML select elements with CSS pseudo-elements and pseudo-classes.

Community
Advanced