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

  • Share
  • Artboard 2 copyArchive
  • Delete

Select menu

  • First
  • Second
  • Third
  • Fourth

With divider

  • First
  • Second
  • Third
  • Fourth

Custom content

  • F
    FirstClouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.
  • S
    SecondThe textures generated by Clouds are extremely thick, partly because of the large number of concurrent grains (up to 60), partly because of a built-in allpass diffuser and reverberator, smearing the shortest transient into a wash of noise - giving the illusion of an even larger number of simultaneous grains.
  • T
    ThirdGrains are seeded randomly, periodically, or whenever the module receives a trigger.

Trigger

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