Menu

import { Menu, Submenu, MenuItem, MenuSpacer } from 'cx/widgets';

The Menu widget is used to present a list of options or commands in a horizontal or a vertical form. The Submenu widget is used when multiple options need to be shown under a single menu item.

Menus are completely driven by focus. If the menu loses focus, all sub-menus are closed.

You can programmatically close the menu by calling document.activeElement.blur(). To close only one level, i.e. the context menu, call unfocusElement(e.target, true);

Menus

<Menu horizontal overflow style="width: 300px">
    <Submenu keyboardShortcut={KeyCode.esc}>
        File
        <Menu putInto="dropdown" icons>
            <MenuItem
                autoClose
                text="Action"
                onClick={() => { alert('Action')}}
            />
            <MenuItem icon="search" autoClose>
                <a href="#">Link</a>
            </MenuItem>
            <MenuItem icon="search" disabled onClick={() => { alert('Disabled')}}>
                Disabled
            </MenuItem>
            <MenuItem checked={{bind: '$page.checked', defaultValue: true}}>
                Checkbox
            </MenuItem>
            <hr/>
            <MenuItem hideCursor>
                <TextField value-bind="$page.text" mod="menu"/>
            </MenuItem>
            <Submenu arrow icon="calendar">
                Submenu
                <Menu putInto="dropdown">
                    <a href="#">Item 1</a>
                    <a href="#">Item 2</a>
                </Menu>
            </Submenu>
            <Submenu checked={{bind: '$page.checked', defaultValue: true}} arrow>
                Submenu + Check
                <Menu putInto="dropdown">
                    <a href="#">Item 1</a>
                    <a href="#">Item 2</a>
                </Menu>
            </Submenu>
        </Menu>
    </Submenu>
    <Submenu>
        Edit
        <Menu putInto="dropdown">
            <a href="#" onClick={e=> {
                e.preventDefault();
                document.activeElement.blur();
            }}>Link</a>
            <hr/>
            <TextField value-bind="$page.text" mod="menu"/>
            <TextField value-bind="$page.text" mod="menu"/>
            <Checkbox value-bind="$page.checked" mod="menu">Checkbox</Checkbox>
            <Submenu arrow>
                Submenu 1
                <Menu putInto="dropdown">
                    <a href="#">Item 1</a>
                    <a href="#">Item 2</a>
                </Menu>
            </Submenu>
            <Submenu arrow>
                Submenu 2
                <Menu putInto="dropdown">
                    <a href="#">Item 1</a>
                    <a href="#">Item 2</a>
                </Menu>
            </Submenu>
            <DateField value-bind="$page.date" mod="menu"/>
            <MenuItem mod="active" class="test" style="color:red;" autoClose>
                <a href="#">Item Level CSS</a>
            </MenuItem>
            <MenuSpacer />
            <MenuItem text="Right" onClick={() => {}} />
        </Menu>
    </Submenu>
</Menu>

Copied!Cx Fiddle

Horizontal menus are made smaller to match toolbar items, unless size is explicitly set. The menu modifier is used to add margin/padding to menu items.

Use MenuSpacer to push some items to the right. Use overflow to display an overflow menu which will hold items which cannot fit the designated menu area.

Configuration

Menu Menu Item

Property	Description	Type
horizontal	Set to `true` for horizontal menus.	boolean
itemPadding	Controls size of menu items. Supported values are `xsmall`, `small`, `medium`, `large` or `xlarge`. For horizontal menus default size is `small` and for vertical it's `medium`.	string
overflow	Set to `true` to put overflow menu items into a submenu on the right. Default value is `false`.	boolean
autoFocus	Set to `true` to automatically focus the element when mounted.	boolean
baseClass	Base CSS class to be applied to the element. No class is applied by default.	string
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
clickToOpen	Set to `true`, to prevent Submenus to expand on hover. Default value is `false`.	boolean
hoverFocusTimeout	Delay in milliseconds until a Menu receives hover focus. Default value is `500`. Useful to set the delay before the Submenu expands.	number
icons	If set to `true`, menu items apply appropriate padding to accommodate the icons. Default value is `false`.	boolean
innerHtml html	HTML to be injected into the element.	string
items children	List of child elements.	array
layout	Define an inner layout.	string/object
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
outerLayout	Defines the outer layout which wraps the widget.	widget
overflowIcon	Icon to be used for the overflow menu.	string
placement	Defines where the Menu/Submenu will be placed. Supported values are `up`, `right`, `down` and `left`, and corner values `down-left`, `down-right`, `down-left`, `down-right`. Default value is `null`.	string \| null
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
tag	Name of the HTML element to be rendered. Default is `div`.	string
text innerText	Inner text contents.	string
tooltip	Tooltip configuration. For more info see Tooltips.	string/object
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation