How do I create a context menu?

Set mode = 'dropDown' and use the open() method on right-click events with appropriate positioning.

How do I add icons to menu items?

Include an icon property in your dataSource items: { label: 'Save', icon: 'save-icon' }.

smart-ui

JavaScript

Angular

Vue

React

Smart UI React targets React 18+ and current Node LTS for tooling; use TypeScript templates when you want typed props and events.

Demo source (Smart UI repo): react/source/menu/basic/App.jsx

npm create vite@latest my-smart-app -- --template react-ts

```
cd my-smart-app
```
then
```
npm install
```

npm install smart-webcomponents-react

Open src/App.tsx (or App.jsx if you chose JavaScript). The snippet below matches Smart UI React demos for this widget:

import 'smart-webcomponents-react/source/styles/smart.default.css';
import './App.css';
import React from "react";
import { Menu, MenuItem, MenuItemsGroup } from 'smart-webcomponents-react/menu';

const App = () => (
  <div>
    <Menu id="menu">
      <MenuItemsGroup>File
        <MenuItem shortcut="Ctrl+N">New</MenuItem>
        <MenuItem shortcut="Ctrl+0">Open</MenuItem>
        <MenuItemsGroup>Open Containing Folder
          <MenuItem>Explorer</MenuItem>
          <MenuItem>cmd</MenuItem>
        </MenuItemsGroup>
        <MenuItem shortcut="Ctrl+S" disabled>Save</MenuItem>
        <MenuItem shortcut="Ctrl+Alt+S" separator>Save As...</MenuItem>
        <MenuItem shortcut="Alt+F4">Exit</MenuItem>
      </MenuItemsGroup>
      <MenuItemsGroup>Edit
        <MenuItem shortcut="Ctrl+Z">Undo</MenuItem>
        <MenuItem shortcut="Ctrl+Y" separator>Redo</MenuItem>
        <MenuItem shortcut="Ctrl+X">Cut</MenuItem>
        <MenuItem shortcut="Ctrl+C">Copy</MenuItem>
        <MenuItem shortcut="Ctrl+V" disabled>Paste</MenuItem>
      </MenuItemsGroup>
      <MenuItemsGroup dropDownHeight={300}>Encoding
        <MenuItem>Encode in ANSI</MenuItem>
        <MenuItem>Encode in UTF-8</MenuItem>
        <MenuItem>Encode in UTF-8-BOM</MenuItem>
        <MenuItem>Encode in UTCS-2 BE BOM</MenuItem>
        <MenuItem>Encode in UTCS-2 LE BOM</MenuItem>
        <MenuItemsGroup separator>Character sets
          <MenuItemsGroup>Cyrillic
            <MenuItem>ISO 8859-5</MenuItem>
            <MenuItem>KOI8-R</MenuItem>
            <MenuItem>KOI8-U</MenuItem>
            <MenuItem>Windows-1251</MenuItem>
          </MenuItemsGroup>
          <MenuItemsGroup>Chinese
            <MenuItem>Big5 (Traditional)</MenuItem>
            <MenuItem>GB2312 (Simplified)</MenuItem>
          </MenuItemsGroup>
          <MenuItemsGroup>Western European
            <MenuItem>ISO 8859-1</MenuItem>
            <MenuItem>ISO 8859-15</MenuItem>
            <MenuItem>OEM 850</MenuItem>
            <MenuItem>Windows-1252</MenuItem>
          </MenuItemsGroup>
        </MenuItemsGroup>
        <MenuItem>Convert to ANSI</MenuItem>
        <MenuItem>Convert to UTF-8</MenuItem>
        <MenuItem>Convert to UTF-8-BOM</MenuItem>
        <MenuItem>Convert to UTCS-2 BE BOM</MenuItem>
        <MenuItem>Convert to UTCS-2 LE BOM</MenuItem>
      </MenuItemsGroup>
    </Menu>
  </div>
);

export default App;

npm run dev

Open the URL Vite prints (often http://localhost:5173/).

Alternative: Next.js

Create an app with npx create-next-app@latest (Pages Router or App Router). Install the same package (npm install smart-webcomponents-react), then reuse the imports and default export from step 3 in pages/_app.tsx, the App Router root app/layout.tsx, or your top-level layout component so styles and the widget tree load once.

Build menu from data

Create menu items from an array

menu.dataSource = [
  { label: 'File', items: [{ label: 'New' }, { label: 'Open' }] },
  { label: 'Edit', items: [{ label: 'Undo' }, { label: 'Redo' }] }
];

Handle menu item click

Execute actions on menu selection

menu.addEventListener('itemClick', (e) => {
  console.log('Clicked:', e.detail.label);
});

How do I create a context menu?: Set mode = 'dropDown' and use the open() method on right-click events with appropriate positioning.
How do I add icons to menu items?: Include an icon property in your dataSource items: { label: 'Save', icon: 'save-icon' }.

Types ship with smart-webcomponents-react. Import the component and prop types:

import type { Menu, MenuProps } from 'smart-webcomponents-react/menu';

The generated wrappers expose on* callbacks (for example onChange) whose arguments are standard DOM Event values unless the widget typings narrow them further.

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.

Getting Started with React Menu Component

1 Create a Vite + React + TypeScript app

2 Install Smart UI for React