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' }
]}
/>

Props

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