Action Menu

Used to perform an action, or to navigate from a list of options

Examples

Icons

Use ActionMenu.Icon to add context and recognition to action menu items.

import React from 'react'
import ActionMenu from '@pluralsight/ps-design-system-actionmenu'
import { PencilIcon, ChannelIcon, PlayIcon } from '@pluralsight/ps-design-system-icon'
function Example() {
return (
<ActionMenu>
<ActionMenu.Item>
<ActionMenu.Icon marginLeft>
<PencilIcon />
</ActionMenu.Icon>
One item
</ActionMenu.Item>
<ActionMenu.Item>
<ActionMenu.Icon marginLeft>
<ChannelIcon />
</ActionMenu.Icon>
Two item
</ActionMenu.Item>
<ActionMenu.Item>
<ActionMenu.Icon marginLeft>
<PlayIcon />
</ActionMenu.Icon>
Three item
</ActionMenu.Item>
</ActionMenu>
)
}
export default Example

Ellipsis

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

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

Nesting

Nested menu lists may spawn from parent menu list items.

import React from 'react'
import ActionMenu from '@pluralsight/ps-design-system-actionmenu'
function Example() {
return (
<ActionMenu>
<ActionMenu.Item>One item</ActionMenu.Item>
<ActionMenu.Divider />
<ActionMenu.Item
nested={
<React.Fragment>
<ActionMenu.Item>Nest 1</ActionMenu.Item>
<ActionMenu.Item
nested={
<React.Fragment>
<ActionMenu.Item>Nest nest 1-1</ActionMenu.Item>
<ActionMenu.Item>Nest nest 1-2</ActionMenu.Item>
<ActionMenu.Item>Nest nest 1-3</ActionMenu.Item>
</React.Fragment>
}
>
Nest 2
</ActionMenu.Item>
<ActionMenu.Divider />
<ActionMenu.Item
nested={
<React.Fragment>
<ActionMenu.Item>Nest nest 3-1</ActionMenu.Item>
<ActionMenu.Item>Nest nest 3-2</ActionMenu.Item>
</React.Fragment>
}
>
Nest 3
</ActionMenu.Item>
</React.Fragment>
}
>
Two item
</ActionMenu.Item>
<ActionMenu.Item>Three item</ActionMenu.Item>
<ActionMenu.Divider />
<ActionMenu.Item>Four item</ActionMenu.Item>
</ActionMenu>
)
}
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 ActionMenu from '@pluralsight/ps-design-system-actionmenu'
function Example() {
return (
<ActionMenu>
<ActionMenu.Item>Normal, enabled</ActionMenu.Item>
<ActionMenu.Item disabled>Present, but disabled</ActionMenu.Item>
<ActionMenu.Item>Normal, enabled</ActionMenu.Item>
</ActionMenu>
)
}
export default Example

Origin

The origin prop determines the starting position and direction of nested menus. Here's an example of ActionMenu.origins.bottomLeft in action

import React from 'react'
import ActionMenu from '@pluralsight/ps-design-system-actionmenu'
function Example() {
return (
<div
style={{
height: 300,
width: 300,
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
alignItems: 'flex-start'
}}
>
<ActionMenu origin={ActionMenu.origins.bottomLeft}>
<ActionMenu.Item
nested={
<React.Fragment>
<ActionMenu.Item>Nest 1</ActionMenu.Item>
<ActionMenu.Item
nested={
<React.Fragment>
<ActionMenu.Item>Nest nest 1-1</ActionMenu.Item>
<ActionMenu.Item>Nest nest 1-2</ActionMenu.Item>
<ActionMenu.Item>Nest nest 1-3</ActionMenu.Item>
</React.Fragment>
}
>
Nest 2
</ActionMenu.Item>
<ActionMenu.Divider />
<ActionMenu.Item>Nest 3</ActionMenu.Item>
<ActionMenu.Item
nested={
<React.Fragment>
<ActionMenu.Item>Nest nest 2-1</ActionMenu.Item>
<ActionMenu.Item>Nest nest 2-2</ActionMenu.Item>
</React.Fragment>
}
>
Nest 4
</ActionMenu.Item>
</React.Fragment>
}
>
One
</ActionMenu.Item>
<ActionMenu.Item>Two</ActionMenu.Item>
</ActionMenu>
</div>
)
}
export default Example

Usage & Types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-actionmenu
  • Import
    import ActionMenu from '@pluralsight/ps-design-system-actionmenu'

ActionMenu

Name
Type
Description
Default
onClosefunctiontriggered when a menu collapses; providing it renders an overlay that triggers this function on click
onClick(Event, value) => voidtriggered when an item selected via click, enter or space
origin
topLeft | topRight | bottomRight | bottomLeft
orientation ActionMenu.origins of nested menustopLeft

ActionMenu.Item

Name
Type
Description
Default
disabledbooleanvisually disabled, non-interactive
hrefstringanchor tag uri
nestedActionMenu.Item(s)nested menu items
onClick(Event, value) => voidoverride default onClick behavior passed to ActionMenu.props.onClick
origin
topLeft | topRight | bottomRight | bottomLeft
override orientation (from ActionMenu.origins) of items nested menu
tagNamebooleanActionMenu.Item trigger element tag (from ActionMenu.tagName)a
valuestring | numbervalue sent to ActionMenu#onChange