Usage

import { Dropdown } from '@loomhq/lens'
<Dropdown
trigger={<div tabIndex="0">Simple trigger</div>}
options={[
{
title: 'Share',
icon: <SvgShare />,
onClick: () => (),
disabled: false,
},
]}
/>

Trigger

Trigger can be any custom node. If the trigger is not a button make sure to add a tabindex attribute to it.

Menu can be positoned on the left or right side relative to the trigger.

With icons

See the Icon set.

Container

Specify where it's going to be rendered in the DOM, this is especially useful when working with Shadow DOM.

<Dropdown
container={() => document.querySelector("#renderContainer")}
trigger={<Button>Trigger</Button>}
options={[
{ title: 'A' },
{ title: 'B' },
{ title: 'C' }
]}
/>

onOpenChange callback

Callback that provides the isOpen value when dropdown opens or closes

Props

prop
type
default
menuPosition
oneOf: 'left', 'right', 'topLeft', 'topRight'
'left'
menuZIndex
number
1100
menuMinWidth
oneOfType
number
string
24
menuMaxWidth
oneOfType
number
string
48
triggerOffset
number
0
trigger
node
options
[{
key: string,
title: node,
icon: node,
onClick: func,
disabled: bool,
}]
isOpen
bool
container
any
onOuterClick
func
onOpenChange
func