Menu

Introduction

Menus display lists of interactive items.

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

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:

Usage

Menu

import React from "react";
import { Menu, MenuItem, MenuDivider, Icon, Classes } from "@commure/components-foundation";
function MyMenu() {
return (
<Menu className={Classes.ELEVATION_1}>
<MenuItem text="No icon" />
<MenuDivider />
<MenuItem icon="new-text-box" text="New text box" />
<MenuItem icon="new-object" text="New object" />
<MenuItem icon="new-link" text="New link" />
<MenuDivider />
<MenuItem icon="cog" labelElement={<Icon icon="share" />} text="Settings..." />
</Menu>
);
}
export default MyMenu;

API Reference

Menu

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
largefalsebooleanWhether the menu items in this menu should use a large appearance.
ulReffalse(ref: HTMLUListElement | null) => anyRef handler that receives the HTML `<ul>` element backing this component.

MenuItem

Prop NameRequired?TypeDescription
activefalsebooleanWhether this menu item should appear with an active state.
childrenfalseReact.ReactNodeChildren 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.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalsebooleanWhether this menu item is non-interactive. Enabling this prop will ignore `href`, `tabIndex`, and mouse event handlers (in particular click, down, enter, leave).
hreffalsestringLink URL.
iconfalseIconName | MaybeElementName of a Blueprint UI icon (or an icon element) to render before the text.
intentfalseIntentVisual intent color to apply to element.
labelfalsestringRight-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.
labelClassNamefalsestringA space-delimited list of class names to pass along to the right-aligned label wrapper element.
labelElementfalseReact.ReactNodeRight-aligned label content, useful for displaying hotkeys.
multilinefalsebooleanWhether the text should be allowed to wrap to multiple lines. If `false`, text will be truncated with an ellipsis when it reaches `max-width`.
onClickfalse(event: MouseEvent<HTMLElement>) => voidClick event handler.
popoverPropsfalsePartial<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.
shouldDismissPopoverfalsebooleanWhether an enabled item without a submenu should automatically close its parent popover when clicked.
tagNamefalsekeyof IntrinsicElementsName of the HTML tag that wraps the MenuItem.
targetfalsestringLink target attribute. Use `"_blank"` to open in a new window.
texttrueReact.ReactNodeItem text, required for usability.
textClassNamefalsestringA space-delimited list of class names to pass along to the text wrapper element.

MenuDivider

Prop NameRequired?TypeDescription
childrenfalseneverThis component does not support children.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
titlefalseReact.ReactNodeOptional header title.

Related Reading

Blueprint Reference
Popover Documentation