Dropdown

Props

Dropdown Props

Prop	Type	Default	Required
variant	"primary" \| "secondary" \| "tertiary" \| "default" \| "warning"	"default"	yes	style of the dropdown
label	string \| ReactNode	""	yes	clones the child element
closeOnOutsideClick	boolean	true	no	close the dropdown when clicking outside
defaultOpen	boolean	false	no	dropdown is opened by default
className	string	""	no	set additional classNames

DropdownItem Props

Prop	Type	Default	Required
asChild	boolean	false	no	clones the child element
className	string	""	no	set additional classNames

Importing Dropdown

import { Dropdown, DropdownItem } from "cerberusui"

Usage

To use the Dropdown specify a variant and a label which will be displayed on the button.

The DropdownItem component is used for the content of the dropdown like shown below.

<Dropdown variant="primary" label="Dropdown">
    <DropdownItem>Item 1</DropdownItem>
    <DropdownItem>Item 2</DropdownItem>
    <DropdownItem>Item 3</DropdownItem>
</Dropdown>

Variants

<Dropdown variant="default" label="Default">
    <DropdownItem>Item 1</DropdownItem>
    <DropdownItem>Item 2</DropdownItem>
    <DropdownItem>Item 3</DropdownItem>
</Dropdown>

Options

Label

The label can be defined as a string or ReactNode.

Type String

<Dropdown variant="primary" label="Dropdown">
    <DropdownItem>Item 1</DropdownItem>
    <DropdownItem>Item 2</DropdownItem>
    <DropdownItem>Item 3</DropdownItem>
</Dropdown>

Type ReactNode

<Dropdown variant="primary" label={<>Dropdown<icon /></>}>
    <DropdownItem>Item 1</DropdownItem>
    <DropdownItem>Item 2</DropdownItem>
    <DropdownItem>Item 3</DropdownItem>
</Dropdown>

closeOnOutsideClick

When set to false the Dropdown won't close when clicked outside. It then only closes when clicking on the button.

<Dropdown variant="primary" label="Dropdown" closeOnOutsideClick={false}>
    <DropdownItem>Item 1</DropdownItem>
    <DropdownItem>Item 2</DropdownItem>
    <DropdownItem>Item 3</DropdownItem>
</Dropdown>

defaultOpen

When using defaultOpen it is recommended to also disable closeOnOutsideClick otherwise the dropdown will be closed on any click.

<Dropdown variant="primary" label="Dropdown" closeOnOutsideClick={false} defaultOpen={true}>
    <DropdownItem>Item 1</DropdownItem>
    <DropdownItem>Item 2</DropdownItem>
    <DropdownItem>Item 3</DropdownItem>
</Dropdown>

DropdownItem asChild

When using the asChild prop the child component will be cloned and the props of the DropdownItem will be passed to it.

<Dropdown variant="primary" label="Dropdown">
    <DropdownItem asChild><a href="#">Item 1</a></DropdownItem>
    <DropdownItem asChild><a href="#">Item 2</a></DropdownItem>
    <DropdownItem asChild><a href="#">Item 3</a></DropdownItem>
</Dropdown>

Button Input