Dropdowns

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.

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.

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

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Alignment options

Here are various dropdown alignment options you can use.

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.

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.

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.

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.

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