Dropdown

A dropdown component to display lists of clickable options.

The Dropdown component can be used to create lists of clickable options such as Menus, Selects, and more.

Source code

Theme

Storybook

Tone

Color

Item Color

Mode

Placement

Size

Shadow

Radius

Trigger

With chevron

Chevron rotation

import { Dropdown, Button } from '@almond-ui/core';

function App() {
  return (
    <Dropdown>
      <Dropdown.Trigger>
        <Button>
          Menu
        </Button>
      </Dropdown.Trigger>
      <Dropdown.Content>
        <Dropdown.Label>Application</Dropdown.Label>
        <Dropdown.Divider />
        <Dropdown.Item>
          Settings
        </Dropdown.Item>
        <Dropdown.Item>
          Messages
        </Dropdown.Item>
        <Dropdown.Label>Danger Zone</Dropdown.Label>
        <Dropdown.Divider />
        <Dropdown.Item disabled>
          Delete my account
        </Dropdown.Item>
        <Dropdown.Item>
          Logout
        </Dropdown.Item>
      </Dropdown.Content>
    </Dropdown>
  );
}

Import

Import the Dropdown component using the following import statement.

import { Dropdown } from '@almond-ui/core';

Colors

The following colors are available for the Dropdown component: white, gray, slate and zinc.

<View>
  <Dropdown color="white">
    // ...
  </Dropdown>

  <Dropdown color="gray">
    // ...
  </Dropdown>

  <Dropdown color="slate">
    // ...
  </Dropdown>

  <Dropdown color="zinc">
    // ...
  </Dropdown>
</View>

Tones & Item Colors

The following tones are supported by the Dropdown.Item component: solid and light.

Moreover, the above tones can be combined with the following colors: blue, red, green, yellow, purple, gray, dark and black.

Solid

<View>
  <Dropdown tone="solid" itemColor="blue">
    // ...
  </Dropdown>

  <Dropdown tone="solid" itemColor="red">
    // ...
  </Dropdown>

  <Dropdown tone="solid" itemColor="green">
    // ...
  </Dropdown>

  <Dropdown tone="solid" itemColor="yellow">
    // ...
  </Dropdown>

  <Dropdown tone="solid" itemColor="purple">
    // ...
  </Dropdown>

  <Dropdown tone="solid" itemColor="gray">
    // ...
  </Dropdown>

  <Dropdown tone="solid" itemColor="dark">
    // ...
  </Dropdown>

  <Dropdown tone="solid" itemColor="black">
    // ...
  </Dropdown>
</View>

Light

<View>
  <Dropdown tone="light" itemColor="blue">
    // ...
  </Dropdown>

  <Dropdown tone="light" itemColor="red">
    // ...
  </Dropdown>

  <Dropdown tone="light" itemColor="green">
    // ...
  </Dropdown>

  <Dropdown tone="light" itemColor="yellow">
    // ...
  </Dropdown>

  <Dropdown tone="light" itemColor="purple">
    // ...
  </Dropdown>

  <Dropdown tone="light" itemColor="gray">
    // ...
  </Dropdown>

  <Dropdown tone="light" itemColor="dark">
    // ...
  </Dropdown>

  <Dropdown tone="light" itemColor="black">
    // ...
  </Dropdown>
</View>

Modes

The following modes are supported by the Dropdown component: tight and spacey.

<View>
  <Dropdown mode="tight">
    // ...
  </Dropdown>

  <Dropdown mode="spacey">
    // ...
  </Dropdown>
</View>

Sizes

The following sizes are supported by the Dropdown component: xs, sm, md and lg.

<View>
  <Dropdown size="xs">
    // ...
  </Dropdown>

  <Dropdown size="sm">
    // ...
  </Dropdown>

  <Dropdown size="md">
    // ...
  </Dropdown>

  <Dropdown size="lg">
    // ...
  </Dropdown>
</View>

Radiuses

The following radiuses are supported by the Dropdown component: none, sm, base, md and lg.

<View>
  <Dropdown radius="none">
    // ...
  </Dropdown>

  <Dropdown radius="sm">
    // ...
  </Dropdown>

  <Dropdown radius="base">
    // ...
  </Dropdown>

  <Dropdown radius="md">
    // ...
  </Dropdown>

  <Dropdown radius="lg">
    // ...
  </Dropdown>
</View>

Shadows

The following shadows are supported by the Dropdown component: none, sm, base and md.

<View>
  <Dropdown shadow="none">
    // ...
  </Dropdown>

  <Dropdown shadow="sm">
    // ...
  </Dropdown>

  <Dropdown shadow="base">
    // ...
  </Dropdown>

  <Dropdown shadow="md">
    // ...
  </Dropdown>
</View>

Placements

Basic placements

The following basic placements are supported by the Dropdown component: top, bottom, left and right.

<View>
  <Dropdown placement="top">
    // ...
  </Dropdown>

  <Dropdown placement="bottom">
    // ...
  </Dropdown>

  <Dropdown placement="left">
    // ...
  </Dropdown>

  <Dropdown placement="right">
    // ...
  </Dropdown>
</View>

Extended placements

Furthermore, the above placements can be combined with the following modifiers: start and end.

Top

<View>
  <Dropdown placement="top-start">
    // ...
  </Dropdown>

  <Dropdown placement="top-end">
    // ...
  </Dropdown>
</View>

Bottom

<View>
  <Dropdown placement="bottom-start">
    // ...
  </Dropdown>

  <Dropdown placement="bottom-end">
    // ...
  </Dropdown>
</View>

Left

<View>
  <Dropdown placement="left-start">
    // ...
  </Dropdown>

  <Dropdown placement="left-end">
    // ...
  </Dropdown>
</View>

Right

<View>
  <Dropdown placement="right-start">
    // ...
  </Dropdown>

  <Dropdown placement="right-end">
    // ...
  </Dropdown>
</View>

Label

Color

The Dropdown.Label component label can be colored by setting the color prop to one of the following values: blue, red, green, yellow, purple, gray, dark and black.

<View>
  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Blue</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label color="blue">Blue</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Red</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label color="red">Red</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Green</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label color="green">Green</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Yellow</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label color="yellow">Yellow</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Purple</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label color="purple">Purple</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Gray</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label color="gray">Gray</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Dark</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label color="dark">Dark</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Black</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label color="black">Black</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>
</View>

The Dropdown.Label component weight can be adjusted by setting the weight prop to one of the following values: thin, extraLight, light, normal, medium, semiBold, bold, extraBold and black.

<View>
  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Blue</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label weight="thin">Thin</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Blue</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label weight="extraLight">Extra light</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Blue</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label weight="light">Light</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Blue</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label weight="normal">Normal</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Blue</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label weight="medium">Medium</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Blue</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label weight="semiBold">Semi bold</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Blue</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label weight="bold">Bold</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Blue</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label weight="extraBold">Extra bold</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Blue</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label weight="black">Black</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>
</View>

Size

The Dropdown.Label component size can be adjusted by setting the size prop to one of the following values: xs, sm, md and lg.

<View>
  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Blue</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label size="xs">Extra small</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Blue</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label size="sm">Small</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Blue</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label size="md">Medium</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Blue</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label size="lg">Large</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>
</View>

Divider

Color

The Dropdown.Divider component color can be adjusted by setting the color prop to one of the following values: gray, slate and dark.

<View>
  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Gray</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label>Gray</Dropdown.Label>
      <Dropdown.Divider color="gray" />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Slate</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label>Slate</Dropdown.Label>
      <Dropdown.Divider color="slate" />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>

  <Dropdown trigger="hover">
    <Dropdown.Trigger>
      <Button>Dark</Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label>Dark</Dropdown.Label>
      <Dropdown.Divider color="dark" />
      <Dropdown.Item>Some more Settings</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>
</View>

Trigger

The Dropdown component can be triggered by the following events: click and hover.

<View>
  <Dropdown trigger="click">
    // ...
  </Dropdown>

  <Dropdown trigger="hover">
    // ...
  </Dropdown>
</View>

Chevron

The chevron icon can be hidden by setting the withChevron prop to false.

<View>
  <Dropdown withChevron={true}>
    // ...
  </Dropdown>

  <Dropdown withChevron={false}>
    // ...
  </Dropdown>
</View>

Chevron rotation

The chevron icon rotation can be disabled by setting the chevronRotation prop to false.

<View>
  <Dropdown chevronRotation={true}>
    // ...
  </Dropdown>

  <Dropdown chevronRotation={false}>
    // ...
  </Dropdown>
</View>

Initial state

The initial state of the Dropdown component can be controlled by setting the initiallyOpen prop.

<View>
  <Dropdown initiallyOpen={true}>
    // ...
  </Dropdown>

  <Dropdown initiallyOpen={false}>
    // ...
  </Dropdown>
</View>

Outside press

By default, when the initiallyOpen prop is set to true, the Dropdown component will close when the user presses outside of it. This behaviour can be disabled by setting the outsidePress prop to false.

<View>
  <Dropdown initiallyOpen={true} outsidePress={true}>
    // ...
  </Dropdown>

  <Dropdown initiallyOpen={true} outsidePress={false}>
    // ...
  </Dropdown>
</View>

Examples

Basic

<View>
  <Dropdown itemColor="gray" trigger="hover">
    <Dropdown.Trigger>
      <Button size="md" color="purple" shadow="base" shadowColor="purple">
        Menu
      </Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label>Application</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>
        <Gear size={20} weight="duotone" className="mr-1.5" />
        Settings
      </Dropdown.Item>
      <Dropdown.Item>
        <ChatCircleText size={20} weight="duotone" className="mr-1.5" />
        Messages
      </Dropdown.Item>
      <Dropdown.Item>
        <Images size={20} weight="duotone" className="mr-1.5" />
        Gallery
      </Dropdown.Item>
      <Dropdown.Item>
        <MagnifyingGlass size={20} weight="duotone" className="mr-1.5" />
        Search
      </Dropdown.Item>
      <Dropdown.Label color="red">Danger Zone</Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item color="yellow">
        <Export size={20} weight="duotone" className="mr-1.5" />
        Transfer my data
      </Dropdown.Item>
      <Dropdown.Item disabled>
        <Trash size={20} weight="duotone" className="mr-1.5" />
        Delete my account
      </Dropdown.Item>
      <Dropdown.Item color="red">
        <SignOut size={20} weight="duotone" className="mr-1.5" />
        Logout
      </Dropdown.Item>
      <Dropdown.Item color="gray">
        <XCircle size={20} weight="duotone" className="mr-1.5" />
        Close
      </Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>
</View>

Items with description

<View>
  <Dropdown itemColor="gray" tone="light" trigger="hover">
    <Dropdown.Trigger>
      <Button size="md" color="dark" shadow="base" shadowColor="dark">
        Menu
      </Button>
    </Dropdown.Trigger>
    <Dropdown.Content>
      <Dropdown.Label weight="medium" size="md" color="black">
        User menu
      </Dropdown.Label>
      <Dropdown.Divider />
      <Dropdown.Item>
        <div className="flex">
          <Gear size={22} weight="duotone" className="mr-2.5 mt-0.5 text-gray-500" />
          <div className="grid grid-cols-1 justify-items-start">
            <span className="font-medium">Settings</span>
            <span className="font-light text-gray-500">Adjust your system settings</span>
          </div>
        </div>
      </Dropdown.Item>
      <Dropdown.Item>
        <div className="flex">
          <ChatCircleText size={22} weight="duotone" className="mr-2.5 mt-0.5 text-gray-500" />
          <div className="grid grid-cols-1 justify-items-start">
            <span className="font-medium">Messages</span>
            <span className="font-light text-gray-500">View your inbox</span>
          </div>
        </div>
      </Dropdown.Item>
      <Dropdown.Item>
        <div className="flex">
          <Images size={22} weight="duotone" className="mr-2.5 mt-0.5 text-gray-500" />
          <div className="grid grid-cols-1 justify-items-start">
            <span className="font-medium">Gallery</span>
            <span className="font-light text-gray-500">Open your uploaded photos</span>
          </div>
        </div>
      </Dropdown.Item>
      <Dropdown.Item>
        <div className="flex">
          <MagnifyingGlass size={22} weight="duotone" className="mr-2.5 mt-0.5 text-gray-500" />
          <div className="grid grid-cols-1 justify-items-start">
            <span className="font-medium">Search</span>
            <span className="font-light text-gray-500">Find your data</span>
          </div>
        </div>
      </Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>
</View>

API Reference

Properties

Prop	Type	Description	Default
chevronRotation	`boolean`	Enables/disables the chevron icon rotation	`true`
color	`DropdownColor`	Sets the dropdown container color	`white`
initiallyOpen	`boolean`	Sets the initial state of the dropdown container	`false`
itemColor	`DropdownItemColor`	Sets the dropdown items color	`gray`
mode	`DropdownMode`	Sets some or zero padding around the dropdown container	`spacey`
outsidePress	`boolean`	Determines whether the dropdown container will be closed if a click event outside of the container is detected, when the initiallyOpen prop is set to true	`true`
placement	`DropdownPlacement`	Sets the placement of the dropdown container in relation to the trigger element	`bottom`
radius	`DropdownRadius`	Sets the container radius	`md`
shadow	`DropdownShadow`	Sets the container shadow	`none`
size	`DropdownSize`	Sets the container size	`sm`
tone	`DropdownTone`	Sets the dropdown items tone	`solid`
trigger	`DropdownTrigger`	Sets the trigger event that will enable the dropdown container	`click`
withChevron	`boolean`	Shows a chevron if the dropdown trigger component is a button	`true`
withinPortal	`boolean`	Renders the dropdown container within a portal	`true`

Dropdown.Label

Prop	Type	Description	Default
color	`DropdownLabelColor`	Sets the dropdown label color	`gray`
size	`DropdownSize`	Sets the dropdown label font size	`sm`
weight	`DropdownLabelWeight`	Sets the dropdown label font weight	`normal`

Dropdown.Divider

Prop	Type	Description	Default
color	`DropdownDividerColor`	Sets the dropdown divider color	`gray`

Dropdown.Item

Prop	Type	Description	Default
color	`DropdownItemColor`	Sets the dropdown item color	`gray`
size	`DropdownSize`	Sets the dropdown item font size	`sm`
tone	`DropdownTone`	Sets the dropdown item tone	`solid`
tabIndex	`number`	Sets the dropdown item tabIndex attribute	`-1`

Events

Dropdown.Item

Event	Type	Description
onClick	`(event: React.MouseEvent<HTMLButtonElement>) => void`	Fires when the dropdown item is clicked

Types

type DropdownArrowPlacement = 'left' | 'right' | 'top' | 'bottom';

type DropdownColor = 'white' | 'gray' | 'slate' | 'zinc';

type DropdownMode = 'tight' | 'spacey';

type Alignment = 'start' | 'end';
type Side = 'top' | 'right' | 'bottom' | 'left';
type AlignedPlacement = `${Side}-${Alignment}`;
type DropdownPlacement = Side | AlignedPlacement;

type DropdownRadius = 'none' | 'sm' | 'base' | 'md' | 'lg';

type DropdownShadow = 'none' | 'sm' | 'base' | 'md';

type DropdownSize = 'xs' | 'sm' | 'md' | 'lg';

type DropdownTone = 'solid' | 'light';

type DropdownTrigger = 'click' | 'hover';

Dropdown.Label

type DropdownLabelColor = 'blue' | 'red' | 'green' | 'yellow' | 'purple' | 'gray' | 'dark';

type DropdownLabelWeight =
  | 'thin'
  | 'extraLight'
  | 'light'
  | 'normal'
  | 'medium'
  | 'semiBold'
  | 'bold'
  | 'extraBold'
  | 'black';

Dropdown.Divider

type DropdownDividerColor = 'gray' | 'slate' | 'zinc';

Dropdown.Item

type DropdownItemColor =
  | 'blue'
  | 'red'
  | 'green'
  | 'yellow'
  | 'purple'
  | 'gray'
  | 'dark'
  | 'black';

Accessibility

The Dropdown component adheres to the WAI-ARIA Menu Button Pattern.

Keyboard interactions

Key	Description
`Enter` or `Space`	Selects the focused item
`Tab`	Moves focus to the next focusable item
`Shift` + `Tab`	Moves focus to the previous focusable item
`Arrow Up`	Moves focus to the next focusable item
`Arrow Down`	Moves focus to the previous focusable item

Drawer Modal