Action Menu

Stateless Menu component

Examples

Ellipsis

Use Menu.Ellipsis to add ellipsis to action menu items.

import React from 'react'
import Menu from '@pluralsight/ps-design-system-menu'
function Example() {
return (
<Menu>
<Menu.Item>
<Menu.Ellipsis>
One item that has text that goes on forever and onward into the
universes yet to be
</Menu.Ellipsis>
</Menu.Item>
<Menu.Item>
<Menu.Ellipsis>
Another item that takes a long time to explain in the context of
everything that is in a line.
</Menu.Ellipsis>
</Menu.Item>
</Menu>
)
}
export default Example

Dividers

Dividers can be useful to separate similar actions. Dividers are applied at the list level, below the assigned list item.

import React from 'react'
import Menu from '@pluralsight/ps-design-system-menu'
function Example() {
return (
<Menu>
<Menu.Item>One item</Menu.Item>
<Menu.Divider />
<Menu.Item>Two item</Menu.Item>
<Menu.Item>Three item</Menu.Item>
<Menu.Divider />
<Menu.Item>Four item</Menu.Item>
</Menu>
)
}
export default Example

Disabled Items

To keep items in the menu but make them disabled, mark with a disabled prop.

import React from 'react'
import Menu from '@pluralsight/ps-design-system-menu'
function Example() {
return (
<Menu>
<Menu.Item>Normal, enabled</Menu.Item>
<Menu.Item disabled>Present, but disabled</Menu.Item>
<Menu.Item>Normal, enabled</Menu.Item>
</Menu>
)
}
export default Example

Origin

The optional origin prop determines the starting position and direction of menu animation when mounting.

import React from 'react'
import Menu from '@pluralsight/ps-design-system-menu'
function Example() {
return (
<div
style={{
height: 300,
width: 300,
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
alignItems: 'flex-start'
}}
>
<Menu origin={Menu.origins.bottomLeft}>
<Menu.Item>
One
</Menu.Item>
<Menu.Item>Two</Menu.Item>
</Menu>
</div>
)
}
export default Example

Usage & Types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-menu
  • Import
    import Menu from '@pluralsight/ps-design-system-menu'
Name
Type
Description
Default
onClick(Event, value) => voidtriggered when an item selected via click, enter or space
origin
topLeft | topRight | bottomRight | bottomLeft
orientation Menu.origins of nested menustopLeft
rolestringUseful when you want to change accessibility props to, listbox, for examplemenu
Name
Type
Description
Default
activebooleanToggles active feedback styles
asstringMenu item default tagbutton
disabledbooleanvisually disabled, non-interactive
onClick(Event, value) => voidoverride default onClick behavior passed to Menu.props.onClick
onKeyDownReact.KeyboardEventHandlerUseful for when you want custom behavior such as e.stopPropagation() to prevent bubbling
onItemBlurReact.FocusEventHandlerCalled when the ListItem is blurred
onItemFocusReact.FocusEventHandlerCalled when the ListItem is focused
rolestringUseful when you want to change accessibility props to option for examplemenuitem
valuestring | numbervalue sent to Menu#onClick''