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
Menu
: a<ul>
container for menu items and dividers.MenuItem
(aliased asMenu.Item
): a single interactive item in aMenu
.MenuDivider
(aliased asMenu.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
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