---
id: dropdown
title: Dropdown
---

# Dropdown

## How to use

<div className="dropdown-docs">
  <code src="@digigov/ui/src/navigation/Dropdown/__stories__/Default.tsx" />
</div>

### With align right

You can display the dropdown menu to the right side of the `Dropdown` button.

<div className="dropdown-docs">
  <code src="@digigov/ui/src/navigation/Dropdown/__stories__/AlignRight.tsx" />
</div>

### With placement top

You can display the dropdown menu to the top of the `Dropdown` button.

<div className="dropdown-docs">
  <code src="@digigov/ui/src/navigation/Dropdown/__stories__/PlacementTop.tsx" />
</div>

### With icons

<div className="dropdown-docs">
  <code src="@digigov/ui/src/navigation/Dropdown/__stories__/WithIcons.tsx" />
</div>

### With scrollable content

Use this when the content  of the dropdown menu is too long to fit on the screen.

<div className="dropdown-docs">
  <code src="@digigov/ui/src/navigation/Dropdown/__stories__/ScrollableContent.tsx" />
</div>

### Dense

<div className="dropdown-docs">
  <code src="@digigov/ui/src/navigation/Dropdown/__stories__/Dense.tsx" />
</div>

## API

See below for a complete reference to all of the props available to the components mentioned here.

<ComponentProps
  componentName={['DropdownBase', 'DropdownButton', 'DropdownContent']}
/>