Dropdown

The Dropdown component provides a flexible dropdown menu using the Popover API. The component consists of three parts:

• Dropdown: The parent component that handles the popover functionality (requires no props)
• DropdownTrigger: The button that opens/closes the dropdown. Accepts all Button props (color, style, size, modifier, etc.)
• DropdownContent: The dropdown menu content with the following props:
  • as: The HTML element to render ('ul', 'ol', or 'div'). Defaults to 'ul'
  • placement: Where the dropdown appears relative to the trigger ('top', 'bottom', 'left', 'right'). Defaults to 'bottom'
  • alignment: How the dropdown aligns to the trigger ('start', 'center', 'end'). Defaults to 'center'

Dropdown

Preview

Click me

• Item 1
• Item 2
• Item 3

code

  <Dropdown>
    <DropdownTrigger>Click me</DropdownTrigger>
    <DropdownContent>
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </DropdownContent>
  </Dropdown>

Placement

Preview

Bottom

• Item 1
• Item 2
• Item 3

Top

• Item 1
• Item 2
• Item 3

Left

• Item 1
• Item 2
• Item 3

Right

• Item 1
• Item 2
• Item 3

code

  <Dropdown>
    <DropdownTrigger>Bottom</DropdownTrigger>
    <DropdownContent placement="bottom">
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </DropdownContent>
  </Dropdown>

  <Dropdown>
    <DropdownTrigger>Top</DropdownTrigger>
    <DropdownContent placement="top">
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </DropdownContent>
  </Dropdown>

  <Dropdown>
    <DropdownTrigger>Left</DropdownTrigger>
    <DropdownContent placement="left">
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </DropdownContent>
  </Dropdown>

  <Dropdown>
    <DropdownTrigger>Right</DropdownTrigger>
    <DropdownContent placement="right">
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </DropdownContent>
  </Dropdown>

Alignment

Preview

Start

• Item 1
• Item 2
• Item 3

Center

• Item 1
• Item 2
• Item 3

End

• Item 1
• Item 2
• Item 3

code

  <Dropdown>
    <DropdownTrigger>Start</DropdownTrigger>
    <DropdownContent alignment="start">
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </DropdownContent>
  </Dropdown>

  <Dropdown>
    <DropdownTrigger>Center</DropdownTrigger>
    <DropdownContent alignment="center">
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </DropdownContent>
  </Dropdown>

  <Dropdown>
    <DropdownTrigger>End</DropdownTrigger>
    <DropdownContent alignment="end">
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </DropdownContent>
  </Dropdown>

As element type

The as prop allows you to choose which HTML element renders the dropdown content. Use 'ul' for unordered lists (default), 'ol' for ordered lists, or 'div' for custom containers.

Preview

As UL

• Item 1
• Item 2
• Item 3

As OL

1. Item 1
2. Item 2
3. Item 3

As DIV

Item 1

Item 2

Item 3

code

  <Dropdown>
    <DropdownTrigger>As UL</DropdownTrigger>
    <DropdownContent>
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </DropdownContent>
  </Dropdown>

  <Dropdown>
    <DropdownTrigger>As OL</DropdownTrigger>
    <DropdownContent as="ol">
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </DropdownContent>
  </Dropdown>

  <Dropdown>
    <DropdownTrigger>As DIV</DropdownTrigger>
    <DropdownContent as="div">
      <div class="p-2">
        <div><a>Item 1</a></div>
        <div><a>Item 2</a></div>
        <div><a>Item 3</a></div>
      </div>
    </DropdownContent>
  </Dropdown>

Combining placement and alignment

Preview

Top Start

• Item 1
• Item 2
• Item 3

Right End

• Item 1
• Item 2
• Item 3

Left Center

• Item 1
• Item 2
• Item 3

code

  <Dropdown>
    <DropdownTrigger>Top Start</DropdownTrigger>
    <DropdownContent placement="top" alignment="start">
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </DropdownContent>
  </Dropdown>

  <Dropdown>
    <DropdownTrigger>Right End</DropdownTrigger>
    <DropdownContent placement="right" alignment="end">
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </DropdownContent>
  </Dropdown>

  <Dropdown>
    <DropdownTrigger>Left Center</DropdownTrigger>
    <DropdownContent placement="left" alignment="center">
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </DropdownContent>
  </Dropdown>

With custom trigger button styles

The DropdownTrigger accepts all Button props, allowing you to style the trigger button just like any other button.

Preview

Primary Button

• Item 1
• Item 2
• Item 3

Error Outline

• Item 1
• Item 2
• Item 3

Ghost Small

• Item 1
• Item 2
• Item 3

code

  <Dropdown>
    <DropdownTrigger color="primary">Primary Button</DropdownTrigger>
    <DropdownContent>
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </DropdownContent>
  </Dropdown>

  <Dropdown>
    <DropdownTrigger color="error" style="outline">Error Outline</DropdownTrigger>
    <DropdownContent>
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </DropdownContent>
  </Dropdown>

  <Dropdown>
    <DropdownTrigger style="ghost" size="sm">Ghost Small</DropdownTrigger>
    <DropdownContent>
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </DropdownContent>
  </Dropdown>