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.
<Arrange gap="large">
<Dropdown
trigger={<div tabIndex="0">Simple trigger</div>}
options={[
{ title: 'Share', onClick: () => alert('hi'), },
{ title: 'Archive' },
{ title: 'Disabled', disabled: true },
]}
/>
<Dropdown
trigger={
<Arrange tabIndex="0">
<Text fontWeight="bold">Trigger with icon</Text>
<Icon icon={<SvgChevronSmallDown />} />
</Arrange>
}
options={[
{ title: 'Share' },
{ title: 'Archive' },
{ title: 'Disabled', disabled: true },
]}
/>
<Dropdown
trigger={<Button>Button trigger</Button>}
options={[
{ title: 'Share' },
{ title: 'Archive' },
{ title: 'Disabled', disabled: true },
]}
/>
<Dropdown
trigger={<IconButton altText="dropdown" icon={<SvgChevronDown />} />}
options={[
{ title: 'Share' },
{ title: 'Archive' },
{ title: 'Disabled', disabled: true },
]}
/>
</Arrange>
Menu can be positoned on the left or right side relative to the trigger.
<Arrange gap="medium">
<Dropdown
trigger={<Button>Trigger on left</Button>}
menuPosition="left"
options={[
{ title: 'Share' },
{ title: 'Archive' },
]}
/>
<Dropdown
trigger={<Button>Trigger on right</Button>}
menuPosition="right"
options={[
{ title: 'Share' },
{ title: 'Archive' },
]}
/>
<Dropdown
trigger={<Button>Trigger on top left</Button>}
menuPosition="topLeft"
options={[
{ title: 'Share' },
{ title: 'Archive' },
]}
/>
<Dropdown
trigger={<Button>Trigger on top right</Button>}
menuPosition="topRight"
options={[
{ title: 'Share' },
{ title: 'Archive' },
]}
/>
</Arrange>
With icons
<Dropdown
trigger={<Button>Trigger</Button>}
options={[
{ title: 'Share ' + demoText.long, icon: <SvgShare /> },
{ title: 'Archive', icon: <SvgArchive /> },
{ title: 'Disabled', icon: <SvgTrash />, disabled: true }
]}
/>
See the Icon set.
With divider
<Dropdown
trigger={<Button>Trigger</Button>}
options={[
{ title: 'Share ' },
{ title: 'Archive', },
{ title: 'Download', hasDivider: true }
]}
/>
Min and max width
<Arrange gap="medium">
<Dropdown
trigger={<Button>With min width</Button>}
menuMinWidth={10}
options={[
{ title: 'A' },
{ title: 'B' },
{ title: 'C' }
]}
/>
<Dropdown
trigger={<Button>With max width</Button>}
menuMaxWidth={56}
options={[
{ title: demoText.long },
{ title: demoText.short },
{ title: demoText.title }
]}
/>
</Arrange>
Max height
<Arrange gap="medium">
<Dropdown
menuMaxHeight={24}
trigger={<Button>Trigger</Button>}
options={demoText.ordinals.map((ordinal) => {
return { title: ordinal }
})}
/>
<Dropdown
trigger={<Button>Trigger</Button>}
options={demoText.ordinals.map((ordinal) => {
return { title: ordinal }
})}
/>
</Arrange>
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
<Dropdown
trigger={<Button>console.log on change</Button>}
onOuterClick={() => console.log('onOuterClick')}
options={[
{ title: 'A' },
{ title: 'B' },
]}
/>
onOpenChange callback
Callback that provides the isOpen value when dropdown opens or closes
<Dropdown
trigger={<Button>console.log on change</Button>}
onOpenChange={newState => console.log(newState)}
options={[
{ title: 'A' },
{ title: 'B' },
]}
/>
Props
menuPosition
'left' | 'right' | 'topRight' | 'topLeft'
'left'
menuMinWidth
number | string
24
menuMaxWidth
number | string
48
menuMaxHeight
number | string
container
HTMLElement | (() => HTMLElement) | string
onOpenChange
(isOpen: boolean) => void