##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# Dropdowns

Dropdowns are versatile UI components that reveal contextual menus or options when triggered. They help organize content hierarchically and conserve screen space by showing additional options only when needed. Our dropdowns support various styles, sizes, and behaviors to match your application's needs.

### Examples

Create dropdowns by wrapping the trigger element (button or link) and dropdown menu in a `.dropdown` container. The menu can be toggled through clicking or hovering, depending on your configuration. Each example below demonstrates different dropdown variations and their use cases.

### Single Button Dropdown

The basic dropdown consists of a button with `dropdown-toggle` class that triggers a menu with `dropdown-menu` class. Each menu item is styled with `dropdown-item` class for consistent appearance and behavior. Icons can be added to both the button and menu items for better visual hierarchy.

Single Button Dropdown
Loading...
Single Button Dropdown
Loading...

For navigation purposes, you can use an `<a>` tag instead of a button. This is particularly useful when the dropdown trigger should also act as a link.

Link Dropdown
Loading...
Link Dropdown
Loading...

Dropdowns can be styled with any of Bootstrap's button variants to match your design system:

Primary Dropdown
Loading...
Primary Dropdown
Loading...

### Split Button Dropdowns

Split button dropdowns combine a primary action button with a dropdown toggle. The first button performs an immediate action, while the dropdown toggle (marked by a caret) reveals related options. This pattern is ideal for providing quick access to a primary action while keeping related options easily accessible.

Split Button Dropdown
Loading...
Split Button Dropdown
Loading...

### Dropdown Sizing

Dropdowns can be sized to match your interface needs using Bootstrap's sizing classes. Use `btn-lg` for larger dropdowns in prominent areas, and `btn-sm` for more compact dropdowns in dense interfaces. The sizing applies to both the trigger button and split button variations.

Large Dropdowns
Loading...
Large Dropdowns
Loading...
Small Dropdowns
Loading...
Small Dropdowns
Loading...

### Dropdown Menu Item Sizes

Fine-tune the appearance of dropdown menu items using our custom sizing classes. The classes `dropdown-item-xs`, `dropdown-item-sm`, `dropdown-item` (default), `dropdown-item-lg`, and `dropdown-item-xl` allow you to create a consistent hierarchy in your dropdown menus. Each size variant maintains proper spacing for icons and text.

Menu Item Sizes
Loading...
Menu Item Sizes
Loading...

### Menu Directions

Dropdown menus can be positioned in different directions to better suit your layout needs. The direction classes control where the menu appears relative to the trigger button. In Right-to-Left (RTL) mode, these directions are automatically flipped to maintain proper alignment.

### Centered Dropdowns

Use the `dropdown-center` class to horizontally center the dropdown menu relative to its trigger element. This is particularly useful for centered navigation items or when you want to ensure the dropdown aligns with centered content.

Centered Dropdown
Loading...
Centered Dropdown
Loading...

### Dropup

When space below the button is limited, use the `dropup` class to make the dropdown menu appear above the trigger button. This is particularly useful in fixed footers or when the dropdown is near the bottom of the viewport.

Dropup Menu
Loading...
Dropup Menu
Loading...

### Centered Dropup

Combine `dropup-center` with `dropup` classes to create a centered menu that appears above the trigger button. This ensures both vertical and horizontal alignment for a perfectly centered dropdown experience.

Centered Dropup
Loading...
Centered Dropup
Loading...

### Right-aligned Dropdown (Dropend)

The `dropend` class positions the dropdown menu to the right of the trigger button. This is useful for nested navigation menus or when you want to conserve vertical space. Both standard and split button variations are supported with this direction.

Right-aligned Dropdown
Loading...
Right-aligned Dropdown
Loading...

### Left-aligned Dropdown (Dropstart)

Use the `dropstart` class to position the dropdown menu to the left of the trigger button. This direction is particularly useful for right-aligned navigation items or when you want the menu to open towards the start of the reading direction. Both standard and split button variations maintain proper alignment in this configuration.

Left-aligned Dropdown
Loading...
Left-aligned Dropdown
Loading...

### Menu Items

Dropdown menu items can be implemented in various ways to suit different interaction needs. You can use `<button>` elements for action triggers, `<a>` tags for navigation, or static text elements for informational content. Each type maintains consistent styling through the `dropdown-item` class.

Button Menu Items
Loading...
Button Menu Items
Loading...

Use `dropdown-item-text` class to create non-interactive text elements within the dropdown menu. This is useful for displaying static information or status messages alongside actionable items.

Mixed Content Items
Loading...
Mixed Content Items
Loading...

### Active State

Add the `active` class and `aria-current="true"` to highlight the current selection or active state in your dropdown menu. This provides visual feedback and improves accessibility by indicating the current context to users.

Active Menu Items
Loading...
Active Menu Items
Loading...

### Disabled State

Use the `disabled` class and `aria-disabled="true"` attribute to indicate unavailable options in your dropdown menu. This provides both visual and accessibility cues that certain actions are currently not available.

Disabled Menu Items
Loading...
Disabled Menu Items
Loading...

### Menu Alignment

By default, dropdown menus are left-aligned relative to their parent element. Use the `dropdown-menu-end` class to right-align the menu, which is particularly useful for right-aligned navigation items or when you need to prevent the menu from extending beyond the viewport's right edge.

Right-aligned Menu
Loading...
Right-aligned Menu
Loading...

### Responsive Alignment

Create responsive dropdown menus that change alignment based on screen size. Use classes like `dropdown-menu-lg-end` to switch from left alignment on mobile to right alignment on larger screens, or `dropdown-menu-end dropdown-menu-lg-start` for the opposite behavior.

Left to Right Responsive Alignment
Loading...
Left to Right Responsive Alignment
Loading...

For the opposite behavior, combine `dropdown-menu-end` with `dropdown-menu-lg-start` to switch from right alignment on mobile to left alignment on desktop screens.

Right to Left Responsive Alignment
Loading...
Right to Left Responsive Alignment
Loading...

### Alignment options

Here are various dropdown alignment options you can use.

Alignment Options
Loading...
Alignment Options
Loading...

### Menu Content

Dropdown menus can contain various types of content beyond simple links or buttons. You can include headers, dividers, and rich text content to create more structured and informative dropdown menus.

### Headers

Add section headers to your dropdown menu using the `dropdown-header` class. Headers help organize menu items into logical groups and improve navigation clarity. You can combine headers with icons and other content to create rich, structured menus.

Menu with Headers
Loading...
Menu with Headers
Loading...

### Dividers

Use the `dropdown-divider` class to add horizontal separators between groups of related menu items. Dividers help create visual hierarchy and improve menu readability by clearly separating different types of actions or content sections.

Menu with Divider
Loading...
Menu with Divider
Loading...

### Text Content

Enhance your dropdowns with rich text content using the `p-4` utility class for padding and `text-body-secondary` for proper text styling. This is useful for displaying detailed information, status messages, or any content that requires more formatting than standard menu items.

Menu with Text Content
Loading...
Menu with Text Content
Loading...

### Dropdown Options

Customize dropdown behavior and positioning using various data attributes. These options give you fine-grained control over how dropdowns interact with users and how they're positioned relative to their trigger elements.

### Offset and Reference

Use `data-bs-offset` to adjust the dropdown's position with pixel offsets. The format is "x,y" where x controls horizontal and y controls vertical offset. The `data-bs-reference` attribute determines which element the dropdown is positioned relative to, useful for split buttons and complex layouts.

Offset and Reference Options
Loading...
Offset and Reference Options
Loading...

### Auto-close Behavior

Control how dropdowns close using the `data-bs-auto-close` attribute:

- `true` (default) - closes on any click
- `inside` - closes only when clicking inside the dropdown
- `outside` - closes only when clicking outside the dropdown
- `false` - disables automatic closing

This gives you precise control over the dropdown's interaction behavior.
Auto-close Options
Loading...
Auto-close Options
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates