# Dropdown
> Bootstrap's dropdown component built with Svelte 5. Use it to toggle contextual overlays for displaying lists, links, and more.
Source: https://bootstrap-svelte.vercel.app/components/dropdown — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).
## Dropdown Single Button
Any single `Dropdown.Toggle` component within a `Dropdown.Root` will automatically be rendered as a dropdown toggle button.
```html
Dropdown buttonActionAnother actionSomething else here
```
## Dropdown with Links
You can use the `href` attribute on a `Dropdown.Toggle` to make the toggle component a link.
```html
Dropdown buttonActionAnother actionSomething else here
```
## Dropdown Color Variants
Use the `colorVariant` prop to change the appearance of dropdowns. You can use any of the Bootstrap theme colors.
```html
PrimaryActionAnother actionSomething else here
```
## Split Button Dropdowns
Create split button dropdowns by using a regular `Button` component next to a `Dropdown.Toggle` with the `isSplit` prop. Make sure to set `isButtonGroup` to `true` on the `Dropdown.Root`.
```html
ActionAnother actionSomething else here
```
## Dropdown Sizing
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons. Use the `size` prop on the `Dropdown.Toggle` component to change its size.
```html
SmallActionAnother actionSomething else here
```
## Dark Dropdowns
Opt into darker dropdowns to match a dark navbar or custom style by adding `isDark=true` to the `Dropdown.Menu` component. No changes are required to the dropdown items.
```html
Dark DropdownActionAnother actionSomething else here
```
## Navbar Dropdown Example
Dropdowns are commonly used within navigation components. Here's an example of how to implement a dropdown in a navbar.
```html
NavbarDropdownActionAnother actionSomething else here
```
## Dropdown Directions
Control the direction of the dropdown menu with the `direction` prop. Options include `dropdown` (default), `dropdown-center`, `dropdown-end`, `dropup`, `dropup-center`, `dropup-end`, `dropend`, and `dropstart`.
```html
DropdownActionAnother actionSomething else hereDropupActionAnother actionSomething else hereDropendActionAnother actionSomething else hereDropstartActionAnother actionSomething else here
```
## Using Arrow Keys
The Dropdown component provides full keyboard navigation support using arrow keys for accessibility and improved user experience.
### How Arrow Key Navigation Works
- **Opening the Dropdown:** When the toggle button has focus, pressing `↓` (ArrowDown) or `↑` (ArrowUp) will open the dropdown menu and focus the appropriate item.
- **Navigating Items:** Once the dropdown is open, use `↓` (ArrowDown) to move to the next item and `↑` (ArrowUp) to move to the previous item.
- **Cyclical Navigation:** When you reach the last item and press `↓`, focus wraps to the first item. Similarly, when at the first item and pressing `↑`, focus wraps to the last item.
- **Disabled Items:** Navigation skips disabled items so focus only moves among available actions.
- **Dismissing the Dropdown:** Pressing `Esc` closes an open dropdown and returns focus to the toggle. The key stops there, so a surrounding dialog or drawer that also dismisses on `Esc` stays open.
- **Leaving the Dropdown:** Pressing `Tab` until focus moves out of the menu closes the dropdown, unless `autoClose` is `false` or `"inside"`.
###### Try it yourself:
Click on one of the dropdown toggles below, then use your keyboard arrow keys (`↓` and `↑`) to navigate through the menu items. You can also tab to the toggle button and press arrow keys to open the dropdown and start navigating.
```html
Navigate with Arrow KeysFirst ItemSecond ItemThird ItemDisabled ItemFifth ItemButton Items NavigationButton Item 1Button Item 2Button Item 3Active Button Item
```
### Keyboard Navigation Features
###### Toggle Button Behavior
- `↓` - Opens dropdown and focuses first item
- `↑` - Opens dropdown and focuses last item
- `Enter` or `Space` - Toggles dropdown
- `Esc` - Closes the dropdown when it is open
###### Menu Item Behavior
- `↓` - Moves focus to next item (wraps to first)
- `↑` - Moves focus to previous item (wraps to last)
- `Enter` or `Space` - Activates focused item
- `Esc` - Closes dropdown and returns focus to toggle
- `Tab` - Closes dropdown once focus leaves the menu
###### Accessibility Benefits
This keyboard navigation implementation follows ARIA patterns for dropdowns and menus, making the component fully accessible to users who rely on keyboard navigation or assistive technologies like screen readers.
## Menu Content
### Menu Items
Dropdown menu items can be buttons or links. Use the `Dropdown.Item` component without an `href` prop to create a button item.
```html
Dropdown with ButtonsActionAnother actionSomething else here
```
### Menu Items as Links
Add the `href` attribute to a `Dropdown.Item` to create a link item.
```html
Dropdown with LinksActionAnother actionSomething else here
```
### Text Content
Use `Dropdown.ItemText` to add non-interactive text inside a dropdown menu.
```html
Dropdown with TextDropdown item textAnother dropdown item textAction
```
### Active State
Add `isActive=true` to a `Dropdown.Item` to make it appear active.
```html
Active ItemActive itemAnother item
```
### Disabled State
Add `isDisabled=true` to a `Dropdown.Item` to make it appear disabled.
```html
Disabled ItemDisabled itemAnother item
```
## Menu Structure
### Menu Headers
Add a header to label sections of actions in a dropdown menu using the `Dropdown.Header` component.
```html
Dropdown with HeaderHeaderActionAnother action
```
### Menu Dividers
Separate groups of related menu items with a divider using the `Dropdown.Divider` component.
```html
Dropdown with DividerActionAnother actionSomething else here
```
### Menu Alignment
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `isEnd=true` to a `Dropdown.Menu` to right-align the dropdown menu.
If the menu is aligned to the end (using `isEnd=true`), but the Root's `direction` property is not compatible, the Menu component will update the Root's `direction` property to ensure consistent behavior and styling.
```html
Right-aligned MenuActionAnother actionSomething else here
```
## Custom Content
### Custom Text
You can place any content within a dropdown menu, such as text or forms. Just add the content as a child of the `Dropdown.Menu` component.
```html
Dropdown with Text
Some example text that's free-flowing within the dropdown menu.