# syncfusion-react-menu

This skill guides an agent through Syncfusion React menus, from nested navigation to dropdown and context actions. Use it when a project needs configurable menu behavior.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 615 installs · ★ 3
- Author: Syncfusion Inc
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-menu/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-menu

## What it does

The skill covers `MenuComponent` from `@syncfusion/ej2-react-navigations`. It helps an agent build nested navigation, dropdowns, context menus, and hamburger layouts, then connect items to hierarchical JSON data. Selection, opening, and closing events are covered as well.

Its reference material explains component properties, API methods, callbacks, styling, data binding, and mobile behavior. It also covers icons, separators, RTL layouts, scrolling, state persistence, and item updates through methods such as `insertBefore()`, `removeItems()`, and `enableItems()`. The example depends on `@syncfusion/ej2-react-navigations`; without that package, the `MenuComponent` import will fail.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-menu -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/syncfusion-react-menu/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-menu/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-menu -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-menu/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-menu -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-menu/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install syncfusion/react-ui-components-skills syncfusion-react-menu
```

2. **Manually: put the files in place**
- File: `.github/skills/syncfusion-react-menu/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-menu -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-menu
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-menu/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-menu -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-menu/SKILL.md

## When to use it
- build a nested React navigation menu
- configure dropdown and context-menu actions
- bind menu items to hierarchical JSON
- add a hamburger layout for mobile screens
- handle item selection and menu lifecycle events

## Example prompts
- Create a React menu with `MenuComponent` and nested entries for File and Edit sections.
- Configure `MenuComponent` to react to selection, open, and close events, and disable selected items.
- Build a mobile hamburger menu with RTL layout, icons, and state persistence after reloads.

## Similar
- [navigation-menu-generator](https://affpapa.org/en/nevibecode/skills/navigation-menu-generator.md) — skill · 1100 installs
- [k-schoollunch-menu](https://affpapa.org/en/nevibecode/skills/k-schoollunch-menu.md) — skill · 6800 installs
- [k2f-menu](https://affpapa.org/en/nevibecode/skills/k2f-menu.md) — skill · 691 installs
- [vercel-react-native-skills](https://affpapa.org/en/nevibecode/skills/vercel-react-native-skills.md) — skill · 255200 installs
- [vercel-react-view-transitions](https://affpapa.org/en/nevibecode/skills/vercel-react-view-transitions.md) — skill · 168100 installs
- [gsap-react](https://affpapa.org/en/nevibecode/skills/gsap-react.md) — skill · 66900 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 37 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md