Dropdown

import { Dropdown, Menu } from '@tulsa/core';

<Dropdown label='Choose an option'>
    <Menu.Item
        leadingVisual={<BiUser color='inherit' fontSize={"1.1em"} />}
        trailingVisual={"⌘ + P"}
        as="div"
    >
        Your Profile
    </Menu.Item>
    <Menu.Item
        leadingVisual={<BiAlarm color='inherit' fontSize={"1.1em"} />}
        trailingVisual={"⌘ + S"}
        as="div"
    >
        Account Settings
    </Menu.Item>
    <Menu.Divider isRowDivider />
    <Menu.Item as="div" variant='dangerous' selected trailingVisual={<BiChevronRight color='inherit' fontSize={"1.2em"} />}>Refer a Friend</Menu.Item>
    <Menu.Divider />
    <Menu.Item as="div" variant='dangerous'>Sign Out</Menu.Item>
</Dropdown>

Props

Name	Type	Description	Default
justify	'left' | 'right'	Controls the side that the dropdown is justified	"right"
align	'top' | 'bottom'	Controls the side that the dropdown is aligned	"bottom"
customTrigger	React.ReactElement	Controls the anchor of the dropdown
triggerProps	IButtonProps<'button'>	Props that are passed to the default anchor of the dropdown. Only applies if a no custom trigger is applied.
label	string	Label of the anchor of the dropdown. Only applies if no custom trigger is applied.
menuProps	HTMLProps<"ul">	Props that are applied to the `<Menu />` of the dropdown.
itemRootProps	HTMLProps<"li">	Props that are applied to the root `<Menu.Item />` of every item.

Examples

Dropdown above

<Dropdown label='Choose an option' justify='left' align='top'>
    <Menu.Item
        leadingVisual={<BiUser color='inherit' fontSize={"1.1em"} />}
        trailingVisual={"⌘ + P"}
        as="div"
    >
        Your Profile
    </Menu.Item>
    <Menu.Item
        leadingVisual={<BiAlarm color='inherit' fontSize={"1.1em"} />}
        trailingVisual={"⌘ + S"}
        as="div"
    >
        Account Settings
    </Menu.Item>
    <Menu.Divider isRowDivider />
    <Menu.Item as="div" variant='dangerous' selected trailingVisual={<BiChevronRight color='inherit' fontSize={"1.2em"} />}>Refer a Friend</Menu.Item>
    <Menu.Divider />
    <Menu.Item as="div" variant='dangerous'>Sign Out</Menu.Item>
</Dropdown>