Action menu | Pluralsight Design System

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

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

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

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit

WAI-ARIA Patterns: Menu

Props

ActionMenu

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

ActionMenu.Item

Name	Type	Description	Default
`disabled`	`boolean`	visually disabled, non-interactive
`href`	`string`	anchor tag uri
`nested`	`ActionMenu.Item(s)`	nested menu items
`onClick`	`(Event, value) => void`	override default onClick behavior passed to ActionMenu.props.onClick
`origin`	`topLeft \| topRight \| bottomRight \| bottomLeft`	override orientation (from ActionMenu.origins) of items nested menu
`tagName`	`boolean`	ActionMenu.Item trigger element tag (from ActionMenu.tagName)	`a`
`value`	`string \| number`	value sent to ActionMenu#onChange