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.

With divider

Min and max width

Max height

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

onOuterClick callback

onOpenChange callback

Callback that provides the isOpen value when dropdown opens or closes

Props

name
type
default
menuPosition
'left' | 'right'
'left'
menuZIndex
number
1100
menuMinWidth
number | string
24
menuMaxWidth
number | string
48
triggerOffset
number
0
trigger
React.ReactNode
options
OptionsObject[]
isOpen
boolean
menuMaxHeight
number | string
container
HTMLElement | (() => HTMLElement) | string
onOuterClick
() => void
onOpenChange
(isOpen: boolean) => void