Dropdown | Bootstrap Svelte

Playground

Experiment with the Dropdown component by adjusting the props below:

Interactive Playground

Controls

Direction

Color Variant

Auto Close

Button Text

Use Split Button

Is Button Group

Dark Menu

Align End

Track Events

Preview

Code

            
            <Dropdown.Root>
  <Dropdown.Toggle colorVariant="primary">Dropdown</Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item href="#!">Action</Dropdown.Item>
    <Dropdown.Item href="#!">Another action</Dropdown.Item>
    <Dropdown.Item href="#!">Something else here</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown.Root>

Dropdown Single Button

Any single Dropdown.Toggle component within a Dropdown.Root will automatically be rendered as a dropdown toggle button.

            
            <Dropdown.Root>
    <Dropdown.Toggle colorVariant="secondary">Dropdown button</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item href="#!">Action</Dropdown.Item>
        <Dropdown.Item href="#!">Another action</Dropdown.Item>
        <Dropdown.Item href="#!">Something else here</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

Dropdown with Links

You can use the href attribute on a Dropdown.Toggle to make the toggle component a link.

            
            <Dropdown.Root>
    <Dropdown.Toggle colorVariant="secondary" href="#!">Dropdown button</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item href="#!">Action</Dropdown.Item>
        <Dropdown.Item href="#!">Another action</Dropdown.Item>
        <Dropdown.Item href="#!">Something else here</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

Dropdown Color Variants

Use the colorVariant prop to change the appearance of dropdowns. You can use any of the Bootstrap theme colors.

            
            <Dropdown.Root isButtonGroup={true}>
    <Dropdown.Toggle colorVariant="primary">Primary</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item href="#!">Action</Dropdown.Item>
        <Dropdown.Item href="#!">Another action</Dropdown.Item>
        <Dropdown.Item href="#!">Something else here</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

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.

            
            <Dropdown.Root isButtonGroup={true}>
    <Button colorVariant="primary">Primary</Button>
    <Dropdown.Toggle colorVariant="primary" isSplit={true}></Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item href="#!">Action</Dropdown.Item>
        <Dropdown.Item href="#!">Another action</Dropdown.Item>
        <Dropdown.Item href="#!">Something else here</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

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.

            
            <Dropdown.Root isButtonGroup={true}>
    <Dropdown.Toggle colorVariant="primary" size="sm">Small</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item href="#!">Action</Dropdown.Item>
        <Dropdown.Item href="#!">Another action</Dropdown.Item>
        <Dropdown.Item href="#!">Something else here</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

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.

            
            <Dropdown.Root isButtonGroup={true}>
    <Dropdown.Toggle colorVariant="dark">Dark Dropdown</Dropdown.Toggle>
    <Dropdown.Menu isDark={true}>
        <Dropdown.Item href="#!">Action</Dropdown.Item>
        <Dropdown.Item href="#!">Another action</Dropdown.Item>
        <Dropdown.Item href="#!">Something else here</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

Navbar Dropdown Example

Dropdowns are commonly used within navigation components. Here's an example of how to implement a dropdown in a navbar.

            
            <Navbar.Root colorVariant="dark" expandOnBreakpoint="lg" class="bg-dark">
    <Container isFluid={true}>
        <Navbar.Brand href="#!">Navbar</Navbar.Brand>
        <Navbar.Toggler ariaLabel="Toggle navigation">
            <Navbar.TogglerIcon />
        </Navbar.Toggler>
        <Navbar.Collapse id="navbarNavDarkDropdown">
            <Navbar.Nav class="me-auto mb-2 mb-lg-0">
                <Dropdown.Root direction="dropdown">
                    <Dropdown.Toggle colorVariant="dark">Dropdown</Dropdown.Toggle>
                    <Dropdown.Menu isDark={true}>
                        <Dropdown.Item href="#!">Action</Dropdown.Item>
                        <Dropdown.Item href="#!">Another action</Dropdown.Item>
                        <Dropdown.Item href="#!">Something else here</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown.Root>
            </Navbar.Nav>
        </Navbar.Collapse>
    </Container>
</Navbar.Root>

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.

            
            <Dropdown.Root direction="dropdown" isButtonGroup={true}>
    <Dropdown.Toggle colorVariant="primary">Dropdown</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item href="#!">Action</Dropdown.Item>
        <Dropdown.Item href="#!">Another action</Dropdown.Item>
        <Dropdown.Item href="#!">Something else here</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

<Dropdown.Root direction="dropup" isButtonGroup={true}>
    <Dropdown.Toggle colorVariant="secondary">Dropup</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item href="#!">Action</Dropdown.Item>
        <Dropdown.Item href="#!">Another action</Dropdown.Item>
        <Dropdown.Item href="#!">Something else here</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

<Dropdown.Root direction="dropend" isButtonGroup={true}>
    <Dropdown.Toggle colorVariant="success">Dropend</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item href="#!">Action</Dropdown.Item>
        <Dropdown.Item href="#!">Another action</Dropdown.Item>
        <Dropdown.Item href="#!">Something else here</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

<Dropdown.Root direction="dropstart" isButtonGroup={true}>
    <Dropdown.Toggle colorVariant="info">Dropstart</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item href="#!">Action</Dropdown.Item>
        <Dropdown.Item href="#!">Another action</Dropdown.Item>
        <Dropdown.Item href="#!">Something else here</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

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 includes disabled items (they receive focus but cannot be activated).

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.

            
            <Dropdown.Root>
    <Dropdown.Toggle colorVariant="primary">Navigate with Arrow Keys</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item href="#!">First Item</Dropdown.Item>
        <Dropdown.Item href="#!">Second Item</Dropdown.Item>
        <Dropdown.Item href="#!">Third Item</Dropdown.Item>
        <Dropdown.Item href="#!" isDisabled={true}>Disabled Item</Dropdown.Item>
        <Dropdown.Item href="#!">Fifth Item</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

<Dropdown.Root>
    <Dropdown.Toggle colorVariant="success">Button Items Navigation</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item>Button Item 1</Dropdown.Item>
        <Dropdown.Item>Button Item 2</Dropdown.Item>
        <Dropdown.Item>Button Item 3</Dropdown.Item>
        <Dropdown.Item isActive={true}>Active Button Item</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

Keyboard Navigation Features

Toggle Button Behavior

↓ - Opens dropdown and focuses first item
↑ - Opens dropdown and focuses last item
Enter or Space - Toggles dropdown

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

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.

            
            <Dropdown.Root>
    <Dropdown.Toggle colorVariant="secondary">Dropdown with Buttons</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item>Action</Dropdown.Item>
        <Dropdown.Item>Another action</Dropdown.Item>
        <Dropdown.Item>Something else here</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

Menu Items as Links

Add the href attribute to a Dropdown.Item to create a link item.

            
            <Dropdown.Root>
    <Dropdown.Toggle colorVariant="secondary">Dropdown with Links</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item href="#!">Action</Dropdown.Item>
        <Dropdown.Item href="#!">Another action</Dropdown.Item>
        <Dropdown.Item href="#!">Something else here</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

Text Content

Use Dropdown.ItemText to add non-interactive text inside a dropdown menu.

            
            <Dropdown.Root>
    <Dropdown.Toggle colorVariant="secondary">Dropdown with Text</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.ItemText>Dropdown item text</Dropdown.ItemText>
        <Dropdown.ItemText>Another dropdown item text</Dropdown.ItemText>
        <Dropdown.Item href="#!">Action</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

Active State

Add isActive=true to a Dropdown.Item to make it appear active.

            
            <Dropdown.Root>
    <Dropdown.Toggle colorVariant="secondary">Active Item</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item isActive={true}>Active item</Dropdown.Item>
        <Dropdown.Item>Another item</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

Disabled State

Add isDisabled=true to a Dropdown.Item to make it appear disabled.

            
            <Dropdown.Root>
    <Dropdown.Toggle colorVariant="secondary">Disabled Item</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item href="#!" isDisabled={true}>Disabled item</Dropdown.Item>
        <Dropdown.Item href="#!">Another item</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

Menu Structure

Menu Headers

Add a header to label sections of actions in a dropdown menu using the Dropdown.Header component.

            
            <Dropdown.Root>
    <Dropdown.Toggle colorVariant="secondary">Dropdown with Header</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Header>Header</Dropdown.Header>
        <Dropdown.Item href="#!">Action</Dropdown.Item>
        <Dropdown.Item href="#!">Another action</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

Menu Dividers

Separate groups of related menu items with a divider using the Dropdown.Divider component.

            
            <Dropdown.Root>
    <Dropdown.Toggle colorVariant="secondary">Dropdown with Divider</Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item href="#!">Action</Dropdown.Item>
        <Dropdown.Item href="#!">Another action</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item href="#!">Something else here</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

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.

            
            <Dropdown.Root isButtonGroup={true}>
    <Dropdown.Toggle colorVariant="secondary">Right-aligned Menu</Dropdown.Toggle>
    <Dropdown.Menu isEnd={true}>
        <Dropdown.Item href="#!">Action</Dropdown.Item>
        <Dropdown.Item href="#!">Another action</Dropdown.Item>
        <Dropdown.Item href="#!">Something else here</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

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.

            
            <Dropdown.Root>
    <Dropdown.Toggle colorVariant="secondary">Dropdown with Text</Dropdown.Toggle>
    <Dropdown.Menu class="p-4 text-body-secondary" style="max-width: 200px;">
        <p>Some example text that's free-flowing within the dropdown menu.</p>
        <p class="mb-0">And this is more example text.</p>
    </Dropdown.Menu>
</Dropdown.Root>

Forms

Put a form within a dropdown menu to provide an inline form that appears in the dropdown when clicked.

            
            <Dropdown.Root>
    <Dropdown.Toggle colorVariant="secondary">Dropdown with Form</Dropdown.Toggle>
    <Dropdown.Menu>
        <form class="px-4 py-3">
            <div class="mb-3">
                <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
                <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="" aria-label="Email" />
            </div>
            <div class="mb-3">
                <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
                <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="" aria-label="Password" />
            </div>
            <div class="mb-3">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="dropdownCheck" />
                    <label class="form-check-label" for="dropdownCheck"> Remember me </label>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
        </form>
        <Dropdown.Divider />
        <Dropdown.Item href="#!">New around here? Sign-up</Dropdown.Item>
        <Dropdown.Item href="#!">Forgot password?</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

Advanced Options

Menu Offset

Use the offset prop on the Dropdown.Menu component to change the position of the dropdown menu. The offset is specified as an array of two numbers: [skidding, distance].

            
            <Dropdown.Root>
    <Dropdown.Toggle colorVariant="secondary">Dropdown with Offset</Dropdown.Toggle>
    <Dropdown.Menu offset={[10, 20]}>
        <Dropdown.Item href="#!">Action</Dropdown.Item>
        <Dropdown.Item href="#!">Another action</Dropdown.Item>
        <Dropdown.Item href="#!">Something else here</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown.Root>

Auto Close Behavior

By default, the dropdown menu closes when clicking inside or outside the dropdown menu. You can control this behavior with the autoClose prop on the Dropdown.Root component.

            
            // Default behavior (closes on both inside and outside clicks)
<Dropdown.Root isButtonGroup={true} autoClose={true}>
    <Dropdown.Toggle colorVariant="secondary">Default (true)</Dropdown.Toggle>
    <Dropdown.Menu>...</Dropdown.Menu>
</Dropdown.Root>

// Only closes when clicking inside the dropdown menu
<Dropdown.Root isButtonGroup={true} autoClose="inside">
    <Dropdown.Toggle colorVariant="secondary">Inside Only</Dropdown.Toggle>
    <Dropdown.Menu>...</Dropdown.Menu>
</Dropdown.Root>

// Only closes when clicking outside the dropdown menu
<Dropdown.Root isButtonGroup={true} autoClose="outside">
    <Dropdown.Toggle colorVariant="secondary">Outside Only</Dropdown.Toggle>
    <Dropdown.Menu>...</Dropdown.Menu>
</Dropdown.Root>

// Manual closing (doesn't close on click)
<Dropdown.Root isButtonGroup={true} autoClose={false}>
    <Dropdown.Toggle colorVariant="secondary">Manual (false)</Dropdown.Toggle>
    <Dropdown.Menu>...</Dropdown.Menu>
</Dropdown.Root>

API Reference

Dropdown.Root Props

Name	Type	Default	Description
`autoClose`	`boolean \| 'inside' \| 'outside'`	`true`	Configure the auto close behavior of the dropdown.
`class`	`string`	—	Additional CSS classes to apply to the component.
`direction`	`string`	`'dropdown'`	Controls the direction where the dropdown menu expands. Values: 'dropdown', 'dropdown-center', 'dropdown-end', 'dropup', 'dropup-center', 'dropup-end', 'dropend', 'dropstart'
`display`	`string`	`'dynamic'`	Controls the display behavior of the dropdown. Values: 'dynamic', 'static'
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`id`	`string`	Auto-generated	Unique identifier for the element
`isButtonGroup`	`boolean`	`false`	Whether the dropdown should be rendered as a button group.
`onHide`	`EventListener`	-	Callback function to execute when the modal begins to hide.
`onHidden`	`EventListener`	-	Callback function to execute when the dropdown has been hidden.
`onShow`	`EventListener`	-	Callback function to execute when the dropdown begins to show.
`onShown`	`EventListener`	-	Callback function to execute when the dropdown has been shown.

Dropdown.Toggle Props

Name	Type	Default	Description
`class`	`string`	—	Additional CSS classes to apply to the component.
`colorVariant`	`string`	—	Sets the button's color. Values: 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'link'
`disabled`	`boolean`	`false`	Makes the button appear inactive and prevents interactions
`href`	`string`	—	When provided, renders the toggle as an anchor (`<a>`) with the given href.
`id`	`string`	Auto-generated	Unique identifier for the element
`isSplit`	`boolean`	`false`	Whether the toggle is part of a split button dropdown.
`size`	`string`	—	Sets the size of the toggle button. Values: 'sm', 'lg'
`type`	`string`	`'button'`	Button type attribute ('button', 'submit', 'reset')

Dropdown.Menu Props

Name	Type	Default	Description
`class`	`string`	—	Additional CSS classes to apply to the component.
`container`	`string \| HTMLElement \| false`	false	Specifies the container element to append the dropdown menu to. Can be a CSS selector, an HTMLElement, or false for the default behavior.
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`id`	`string`	Auto-generated	Unique identifier for the element
`isDark`	`boolean`	`false`	Whether to use dark styles for the dropdown menu.
`isEnd`	`boolean`	`false`	Whether to align the dropdown menu to the right.
`offset`	`[number, number]`	—	The offset of the dropdown menu. Format: [skidding, distance]

Dropdown.Item Props

Name	Type	Default	Description
`class`	`string`	—	Additional CSS classes to apply to the component.
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`href`	`string`	—	When provided, renders the item as an anchor (`<a>`) with the given href.
`id`	`string`	Auto-generated	Unique identifier for the element
`isActive`	`boolean`	`false`	Whether the item should appear as active.
`isDisabled`	`boolean`	`false`	Whether the item should appear as disabled.
`listItemProps`	`ListItemElement`	-	Props to pass to the parent list item element.
`onclick`	`function`	—	Function to execute when the item is clicked.

Dropdown.ItemText Props

Name	Type	Default	Description
`class`	`string`	—	Additional CSS classes to apply to the component.
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`listItemProps`	`ListItemElement`	—	Props to pass to the parent list item element.

Dropdown.Header Props

Name	Type	Default	Description
`class`	`string`	—	Additional CSS classes to apply to the component.
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`level`	`HeadingLevels`	`'h6'`	The heading level to use for the header. Values: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
`listItemProps`	`ListItemElement`	—	Props to pass to the parent list item element.

Dropdown.Divider Props

Name	Type	Default	Description
`class`	`string`	—	Additional CSS classes to apply to the component.
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`listItemProps`	`ListItemElement`	—	Props to pass to the parent list item element.

CSS Classes

The component applies Bootstrap's dropdown classes based on the provided props:

dropdown - Base class for the container
btn-group - Applied when using split button dropdowns
dropup - Applied when direction="up"
dropend - Applied when direction="end"
dropstart - Applied when direction="start"
dropdown-center - Applied when isCentered=true and direction="down"
dropup-center - Applied when isCentered=true and direction="up"
dropdown-toggle - Applied to toggle buttons
dropdown-toggle-split - Applied to toggle buttons in split button dropdowns
dropdown-menu - Base class for dropdown menus
dropdown-menu-dark - Applied when isDark=true on the menu
dropdown-menu-end - Applied when isEnd=true on the menu
dropdown-item - Applied to dropdown items
dropdown-item-text - Applied to non-interactive text items
dropdown-header - Applied to header elements
dropdown-divider - Applied to divider elements
active - Applied to active dropdown items
disabled - Applied to disabled dropdown items

Button Size Classes

When size is specified on the Dropdown.Toggle:

btn-sm - Applied when size="sm"
btn-lg - Applied when size="lg"