Use Menu to build custom action and select menus

For common menu use cases consider using Dropdown or Select.

  • Download
  • Artboard 2 copyArchive
  • Delete

Usage

import { Menu, MenuItem } from '@loomhq/lens'
<Menu maxWidth={24}>
  <MenuItem icon={<SvgDownload />}>Download</MenuItem>
  <MenuItem icon={<SvgArchive />}>Archive</MenuItem>
  <MenuItem icon={<SvgTrash />}>Delete</MenuItem>
</Menu>

Actions menu

Select menu

With divider

Custom content

With Popover and Downshift

Combine with Popover component to position Menu as an overlay.
Use Downshift to manage the menu state, keyboard navigation and selectiion.

Props

name
type
default
downshiftMenuProps
any
() => null
isDisabled
boolean
position
string
zIndex
number
minWidth
number | string
maxWidth
number | string
maxHeight
number | string
children
React.ReactNode
name
type
default
isDisabled
boolean
isHighlighted
boolean
isSelected
boolean
icon
React.ReactNode
hasDivider
boolean
children
React.ReactNode
columns
string