rc-menu

Basic Menu

This code sample demonstrates how to create a basic menu with three options. When an option is selected, it logs the key of the selected item.

import Menu, { Item as MenuItem } from 'rc-menu';

<Menu onSelect={({ key }) => console.log(key)}>
  <MenuItem key="1">Option 1</MenuItem>
  <MenuItem key="2">Option 2</MenuItem>
  <MenuItem key="3">Option 3</MenuItem>
</Menu>

Sub Menu

This example shows how to create a menu with a sub-menu. The sub-menu contains two options, demonstrating how to nest menus within each other.

import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';

<Menu>
  <SubMenu title="Sub Menu">
    <MenuItem key="sub1">Option 1</MenuItem>
    <MenuItem key="sub2">Option 2</MenuItem>
  </SubMenu>
</Menu>

Vertical Menu

This snippet illustrates how to create a vertical menu by setting the mode prop to 'vertical'. It's useful for sidebar navigation.

import Menu, { Item as MenuItem } from 'rc-menu';

<Menu mode="vertical">
  <MenuItem key="1">Option 1</MenuItem>
  <MenuItem key="2">Option 2</MenuItem>
  <MenuItem key="3">Option 3</MenuItem>
</Menu>