Overflow Menu

Overview

Overflow Menus contain a list of actions in a menu, that is hidden until the user clicks on the overflow menu button. Used throughout Arc Publishing, the overflow menu keeps key actions close by in a clean and unobtrusive menu.

• Usage
• React

Import

Arc UI exports 2 components for an overflow menu:

• OverflowMenu: The wrapper component that provides
• MenuItem: Trigger that handles selection. Must be a child of OverflowMenu.

import { OverflowMenu, MenuItem } from '@wpmedia/arc-ui-menu'

Usage

interface MenuItemProps

Props	Description
destroy (optional)	undefined | false | true = false Show destructive styling for this element
disabled (optional)	undefined | false | true = false Disables this menu item from being selected

<Flex justifyContent="flex-end"> <OverflowMenu> <MenuItem onSelect={() => alert('edit')}>Edit</MenuItem> <MenuItem onSelect={() => alert('edit')}>Edit moar items</MenuItem> <MenuItem disabled={true} onSelect={() => alert('edit')}> Not able to edit this </MenuItem> <MenuItem destroy={true} onSelect={() => alert('delete')}> Delete </MenuItem> </OverflowMenu> </Flex>

<Flex justifyContent="flex-end">
  <OverflowMenu>
    <MenuItem onSelect={() => alert('edit')}>Edit</MenuItem>
    <MenuItem onSelect={() => alert('edit')}>Edit moar items</MenuItem>
    <MenuItem disabled={true} onSelect={() => alert('edit')}>
      Not able to edit this
    </MenuItem>
    <MenuItem destroy={true} onSelect={() => alert('delete')}>
      Delete
    </MenuItem>
  </OverflowMenu>
</Flex>

Copy