Dropdown

A versatile dropdown menu component that provides a list of options when triggered. Built with accessibility and flexibility in mind.

Examples

1import { Dropdown, FlexBox } from '@sugarcoat/ui'
2
3<FlexBox gap='3' justify='center'>
4  <Dropdown>
5    <Dropdown.Trigger>Open Menu</Dropdown.Trigger>
6    <Dropdown.Content>
7      <Dropdown.Item>Profile</Dropdown.Item>
8      <Dropdown.Item>Settings</Dropdown.Item>
9      <Dropdown.Separator />
10      <Dropdown.Item>Logout</Dropdown.Item>
11    </Dropdown.Content>
12  </Dropdown>
13</FlexBox>
14

API Reference

Component	Description
Dropdown	A versatile dropdown menu component that provides a list of options when triggered.
Dropdown.Trigger	The button that triggers the dropdown menu. Inherits button component props.
Dropdown.Content	The container for dropdown menu items. Can include items, groups, and separators.
Dropdown.Item	A clickable menu item that can trigger an action.
Dropdown.CheckboxItem	A menu item that can be checked or unchecked.
Dropdown.RadioGroup	A group of radio items where only one can be selected.

Component Properties

Dropdown.Content

Prop	Type	Default	Description
portal	boolean	true	Whether to render the content in a portal.
arrow	boolean	true	Whether to show an arrow pointing to the trigger.

Dropdown.Item

Prop	Type	Default	Description
icon	ReactNode	-	Optional icon to display before the item text.

Dropdown.CheckboxItem

Prop	Type	Default	Description
checked	boolean	false	Whether the item is checked.
showIndicator	boolean	true	Whether to show the checkbox indicator.

Dropdown.RadioGroup

Prop	Type	Default	Description
value	string	-	The currently selected value.
onValueChange	(value: string) => void	-	Callback when the selected value changes.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius