Menu | Pluralsight Design System

Stateless Menu component

Install
npm install @pluralsight/ps-design-system-menu
Import
import Menu from '@pluralsight/ps-design-system-menu'

Examples

import React from 'react'
import Menu from '@pluralsight/ps-design-system-menu'
function Example() {
  return (
    <Menu aria-label="Blanched beans" role="listbox" optionRole="option">
      <Menu.Item>Navy</Menu.Item>
      <Menu.Item active>Butter</Menu.Item>
    </Menu>
  )
}
export default Example

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

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit

WAI-ARIA Patterns: Menu, ListBox

The Menu has flexible ARIA roles. By default, it is a menu, but it is flexible enough to be used as a listbox. Use the aria-label, role and optionRole props to change it.

Props

Name	Type	Description	Default
`onClick`	`(Event, value) => void`	triggered when an item selected via click, enter or space
`origin`	`topLeft \| topRight \| bottomRight \| bottomLeft`	orientation Menu.origins of nested menus	`topLeft`
`role`	`string`	Useful when you want to change accessibility props to, listbox, for example	`menu`

Menu.Item

Name	Type	Description	Default
`active`	`boolean`	Toggles active feedback styles
`as`	`string`	Menu item default tag	`button`
`disabled`	`boolean`	visually disabled, non-interactive
`onClick`	`(Event, value) => void`	override default onClick behavior passed to Menu.props.onClick
`onKeyDown`	`React.KeyboardEventHandler`	Useful for when you want custom behavior such as e.stopPropagation() to prevent bubbling
`onItemBlur`	`React.FocusEventHandler`	Called when the ListItem is blurred
`onItemFocus`	`React.FocusEventHandler`	Called when the ListItem is focused
`role`	`string`	Useful when you want to change accessibility props to option for example	`menuitem`
`value`	`React.ReactText`		`''`
`label`	`React.ReactText`		`''`