Calcite React

Edit page

Menus are good for showing multiple options under a single call to action. For example, if you had a download button, and you needed the user to choose a format for the download, you could put several choices in a Menu.

Menus differ from Select elements in that they don't have a default state or a 'current' state. Instead, they offer a jumping off point for a series of related actions.

Import Syntax

xxxxxxxxxx
 
import Menu, { MenuTitle, MenuItem } from 'calcite-react/Menu';

Basic Usage

 
<Menu style={{ maxWidth: '280px' }}>
  <MenuTitle>Some Options</MenuTitle>
  <MenuItem>Option 1 that has a really long text.</MenuItem>
  <MenuItem>Option 2</MenuItem>
  <MenuItem>Option 3</MenuItem>
  <MenuTitle>More Options</MenuTitle>
  <MenuItem>Option 4</MenuItem>
  <MenuItem disabled>Option 5 Disabled</MenuItem>
</Menu>

With Subtitle

 
<Menu style={{ maxWidth: '280px' }}>
  <MenuTitle>Metric</MenuTitle>
  <MenuItem subtitle="Meters">m</MenuItem>
  <MenuItem subtitle="Kilometers">km</MenuItem>
  <MenuItem subtitle="Millimeters">mm</MenuItem>
  <MenuItem subtitle="Centimeters">cm</MenuItem>
  <MenuItem subtitle="Decimeters">dm</MenuItem>
  <MenuTitle>Imperial</MenuTitle>
  <MenuItem subtitle="Feet">ft</MenuItem>
  <MenuItem subtitle="Inches">in</MenuItem>
  <MenuItem subtitle="Yards">yd</MenuItem>
  <MenuItem subtitle="Miles">mi</MenuItem>
  <MenuItem subtitle="Nautical Miles">NM</MenuItem>
</Menu>

Sizes

extraSmall

small

large

extraLarge

 
<GuideExample label="extraSmall">
  <Menu extraSmall style={{ maxWidth: '280px' }}>
    <MenuTitle>Metric</MenuTitle>
    <MenuItem subtitle="Meters">m</MenuItem>
    <MenuItem subtitle="Kilometers">km</MenuItem>
    <MenuItem subtitle="Millimeters">mm</MenuItem>
    <MenuItem subtitle="Centimeters">cm</MenuItem>
    <MenuItem subtitle="Decimeters">dm</MenuItem>
    <MenuTitle>Imperial</MenuTitle>
    <MenuItem subtitle="Feet">ft</MenuItem>
    <MenuItem subtitle="Inches">in</MenuItem>
    <MenuItem subtitle="Yards">yd</MenuItem>
    <MenuItem subtitle="Miles">mi</MenuItem>
    <MenuItem subtitle="Nautical Miles">NM</MenuItem>
  </Menu>
</GuideExample>
<GuideExample label="small">
  <Menu small style={{ maxWidth: '280px' }}>
    <MenuTitle>Metric</MenuTitle>
    <MenuItem subtitle="Meters">m</MenuItem>
    <MenuItem subtitle="Kilometers">km</MenuItem>
    <MenuItem subtitle="Millimeters">mm</MenuItem>
    <MenuItem subtitle="Centimeters">cm</MenuItem>
    <MenuItem subtitle="Decimeters">dm</MenuItem>
    <MenuTitle>Imperial</MenuTitle>
    <MenuItem subtitle="Feet">ft</MenuItem>
    <MenuItem subtitle="Inches">in</MenuItem>
    <MenuItem subtitle="Yards">yd</MenuItem>
    <MenuItem subtitle="Miles">mi</MenuItem>
    <MenuItem subtitle="Nautical Miles">NM</MenuItem>
  </Menu>
</GuideExample>
<GuideExample label="large">
  <Menu large style={{ maxWidth: '280px' }}>
    <MenuTitle>Metric</MenuTitle>
    <MenuItem subtitle="Meters">m</MenuItem>
    <MenuItem subtitle="Kilometers">km</MenuItem>
    <MenuItem subtitle="Millimeters">mm</MenuItem>
    <MenuItem subtitle="Centimeters">cm</MenuItem>
    <MenuItem subtitle="Decimeters">dm</MenuItem>
    <MenuTitle>Imperial</MenuTitle>
    <MenuItem subtitle="Feet">ft</MenuItem>
    <MenuItem subtitle="Inches">in</MenuItem>
    <MenuItem subtitle="Yards">yd</MenuItem>
    <MenuItem subtitle="Miles">mi</MenuItem>
    <MenuItem subtitle="Nautical Miles">NM</MenuItem>
  </Menu>
</GuideExample>
<GuideExample label="extraLarge">
  <Menu extraLarge style={{ maxWidth: '280px' }}>
    <MenuTitle>Metric</MenuTitle>
    <MenuItem subtitle="Meters">m</MenuItem>
    <MenuItem subtitle="Kilometers">km</MenuItem>
    <MenuItem subtitle="Millimeters">mm</MenuItem>
    <MenuItem subtitle="Centimeters">cm</MenuItem>
    <MenuItem subtitle="Decimeters">dm</MenuItem>
    <MenuTitle>Imperial</MenuTitle>
    <MenuItem subtitle="Feet">ft</MenuItem>
    <MenuItem subtitle="Inches">in</MenuItem>
    <MenuItem subtitle="Yards">yd</MenuItem>
    <MenuItem subtitle="Miles">mi</MenuItem>
    <MenuItem subtitle="Nautical Miles">NM</MenuItem>
  </Menu>
</GuideExample>

Props

Menu `default`

Property	Type	Required	Default	Description
children	Node	false	-	Content node for the Menu
extraSmall	Bool	false	-	Style prop used to render an extra small Menu.
small	Bool	false	-	Style prop used to render a small Menu.
large	Bool	false	-	Style prop used to render a large Menu.
extraLarge	Bool	false	-	Style prop used to render an extra large Menu.

MenuItem

Property	Type	Required	Default	Description
children	Node	false	-	Content of the MenuItem.
subtitle	Node	false	-	A container for content to be displayed right aligned in the MenuItem.
disabled	Bool	false	-	Toggle the disabled state of the MenuItem, results in the item being unselectable and slightly lower opacity

MenuTitle

Property	Type	Required	Default	Description
children	Node	false	-	Content of the MenuTitle.