Menu

Introduction

Menus display lists of interactive items.

The below information is a snippet from the

related section in the Blueprint reference documentation.

Included Components

1. Menu: a <ul> container for menu items and dividers.
2. MenuItem (aliased as Menu.Item): a single interactive item in a Menu.
3. MenuDivider (aliased as Menu.Divider): used to separate menu sections, with an optional title.

Examples

Basic Menu

No icon
New text box
New object
New link
Settings...
Edit code

Dropdown

The Menu component by itself simply renders a list of items. To make a dropdown menu, compose a Menu as the content property of a Popover:

Edit code

Usage

Menu

1import React from "react";
2import {
3  Menu,
4  MenuItem,
5  MenuDivider,
6  Icon,
7  Classes
8} from "@commure/components-foundation";
9
10function MyMenu() {
11  return (
12    <Menu className={Classes.ELEVATION_1}>
13      <MenuItem text="No icon" />
14      <MenuDivider />
15      <MenuItem icon="new-text-box" text="New text box" />
16      <MenuItem icon="new-object" text="New object" />
17      <MenuItem icon="new-link" text="New link" />
18      <MenuDivider />
19      <MenuItem
20        icon="cog"
21        labelElement={<Icon icon="share" />}
22        text="Settings..."
23      />
24    </Menu>
25  );
26}
27
28export default MyMenu;

API Reference

Menu

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to a child element.
large	false	boolean	Whether the menu items in this menu should use a large appearance.
ulRef	false	(ref: HTMLUListElement | null) => any	Ref handler that receives the HTML `<ul>` element backing this component.

MenuItem

Prop Name	Required?	Type	Description
active	false	boolean	Whether this menu item should appear with an active state.
children	false	React.ReactNode	Children of this component will be rendered in a __submenu__ that appears when hovering or clicking on this menu item. Use `text` prop for the content of the menu item itself.
className	false	string	A space-delimited list of class names to pass along to a child element.
disabled	false	boolean	Whether this menu item is non-interactive. Enabling this prop will ignore `href`, `tabIndex`, and mouse event handlers (in particular click, down, enter, leave).
href	false	string	Link URL.
icon	false	IconName | MaybeElement	Name of a Blueprint UI icon (or an icon element) to render before the text.
intent	false	Intent	Visual intent color to apply to element.
label	false	string	Right-aligned label text content, useful for displaying hotkeys. This prop actually supports JSX elements, but TypeScript will throw an error because `HTMLAttributes` only allows strings. Use `labelElement` to supply a JSX element in TypeScript.
labelClassName	false	string	A space-delimited list of class names to pass along to the right-aligned label wrapper element.
labelElement	false	React.ReactNode	Right-aligned label content, useful for displaying hotkeys.
multiline	false	boolean	Whether the text should be allowed to wrap to multiple lines. If `false`, text will be truncated with an ellipsis when it reaches `max-width`.
onClick	false	(event: MouseEvent<HTMLElement>) => void	Click event handler.
popoverProps	false	Partial<IPopoverProps>	Props to spread to `Popover`. Note that `content` and `minimal` cannot be changed and `usePortal` defaults to `false` so all submenus will live in the same container.
shouldDismissPopover	false	boolean	Whether an enabled item without a submenu should automatically close its parent popover when clicked.
tagName	false	keyof IntrinsicElements	Name of the HTML tag that wraps the MenuItem.
target	false	string	Link target attribute. Use `"_blank"` to open in a new window.
text	true	React.ReactNode	Item text, required for usability.
textClassName	false	string	A space-delimited list of class names to pass along to the text wrapper element.

MenuDivider

Prop Name	Required?	Type	Description
children	false	never	This component does not support children.
className	false	string	A space-delimited list of class names to pass along to a child element.
title	false	React.ReactNode	Optional header title.

Related Reading

Blueprint Reference

Popover Documentation