Bootstrap 5 Dropdown

Q: How does Canvas Builder generate dropdown components?

Canvas Builder produces fully accessible dropdown markup with the correct ARIA attributes, data-bs-toggle wiring, and Popper.js-compatible structure. It selects the appropriate variant based on context: standard dropdowns for navigation, split buttons for action groups, and dark menus for dark-themed sections. Brand colours are applied to hover states and active items, and the generated HTML works out of the box with Bootstrap 5's bundled JavaScript.

The Bootstrap 5 Dropdown is a toggleable context menu component built on the Popper.js positioning engine. It supports single-button and split-button triggers, directional placement (down, up, start, end), header and divider elements, form controls inside menus, and auto-close behaviour: making it essential for navigation bars, action menus, and filter panels.

Bootstrap class

.dropdown

Common use cases

Primary navigation dropdown in a navbar for grouping related page links under a single menu label
User account menu with profile, settings, billing, and sign-out options triggered from an avatar button
Action dropdown on data table rows providing edit, duplicate, archive, and delete operations
Filter dropdown in a product listing page letting users select categories, price ranges, or sort orders
Split button dropdown combining a default action (e.g. Save) with alternative actions (Save As, Export) in one control

Variants and classes

Variant	Description and classes	Classes
Standard Dropdown	A single toggle button that opens a menu below it. The most common pattern for navigation and action menus.`dropdown + dropdown-toggle + dropdown-menu`	`dropdown + dropdown-toggle + dropdown-menu`
Split Button Dropdown	Separates the primary action button from the dropdown toggle caret, allowing a default click action alongside a menu.`btn-group + dropdown-toggle dropdown-toggle-split`	`btn-group + dropdown-toggle dropdown-toggle-split`
Dropup / Dropstart / Dropend	Directional variants that open the menu above, to the left, or to the right of the toggle, useful when space below is limited.`dropup / dropstart / dropend`	`dropup / dropstart / dropend`
Dark Dropdown	Applies a dark theme to the dropdown menu for use against dark UI backgrounds or dark-mode layouts.`dropdown-menu dropdown-menu-dark`	`dropdown-menu dropdown-menu-dark`

Code example

HTML

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Actions
  </button>
  <ul class="dropdown-menu">
    <li><h6 class="dropdown-header">Documents</h6></li>
    <li><a class="dropdown-item" href="#">New File</a></li>
    <li><a class="dropdown-item" href="#">Open Recent</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><h6 class="dropdown-header">Export</h6></li>
    <li><a class="dropdown-item" href="#">Export as PDF</a></li>
    <li><a class="dropdown-item" href="#">Export as PNG</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item text-danger" href="#">Delete</a></li>
  </ul>
</div>

Live examples

Navbar Dropdown with Mega Menu Layout

A full-width dropdown inside a navbar that uses a grid layout to display grouped links, ideal for sites with many sections.

Example 1

Split Button Dropdown with Contextual Actions

A split button group where the main button performs the default action and the caret opens alternative options.

Example 2

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

Canvas navbar dropdown with brand-coloured hover states and smooth fade-in animation
Canvas user account dropdown with avatar trigger and grouped menu sections
Canvas dark-mode dropdown menu with subtle border and shadow styling
Canvas split-button dropdown for primary action + alternatives in form toolbars

Best practices

Always include aria-expanded on the toggle

The dropdown toggle button must have aria-expanded='false' as a default attribute. Bootstrap's JavaScript automatically toggles it to 'true' when the menu opens, but omitting the initial attribute means screen readers won't announce the collapsed state. Also add role='menu' on the <ul> and role='menuitem' on each <a> for full ARIA compliance in application-style menus.

Use data-bs-auto-close to control dismiss behaviour

By default, clicking outside or inside the menu closes it. Set data-bs-auto-close='outside' on the toggle to keep the menu open when users click inside: essential for dropdowns containing forms, checkboxes, or multi-select filters. Use data-bs-auto-close='false' to make the menu only closable programmatically.

Avoid deep nesting. Use offcanvas for complex menus

Bootstrap 5 dropdowns do not natively support nested sub-menus (multi-level dropdowns). Attempting to nest them leads to z-index conflicts and poor mobile UX. For complex multi-level navigation, use an offcanvas panel or accordion-based menu on mobile, and a mega-menu grid layout on desktop. Canvas Builder follows this pattern in its generated navbar components.

FAQ

How do I open a Bootstrap 5 dropdown programmatically with JavaScript?

Create a Dropdown instance using const dropdown = new bootstrap.Dropdown(toggleElement) and then call dropdown.show() to open or dropdown.hide() to close. You can also use dropdown.toggle() to switch between states. Make sure the Bootstrap JS bundle is loaded and the toggle element has the correct data-bs-toggle='dropdown' attribute. Event listeners like 'shown.bs.dropdown' and 'hidden.bs.dropdown' let you react to state changes.

Can I put a form inside a Bootstrap dropdown menu?

Yes. Place your <form> element directly inside the .dropdown-menu container. Use the p-3 utility class on the menu for comfortable padding. Add data-bs-auto-close='outside' to the toggle so the menu stays open while users interact with the form fields. This pattern is commonly used for login popups, quick search filters, and inline settings panels.

Why does my dropdown menu appear behind other elements?

This is a z-index stacking context issue. Bootstrap 5 sets dropdown menus to z-index: 1000. If a parent container has overflow: hidden, a lower z-index, or creates a new stacking context (via transform, opacity < 1, or will-change), the dropdown can be clipped or layered incorrectly. Solutions include: removing overflow: hidden from parent containers, using Bootstrap's data-bs-boundary attribute, or applying position: static to the .dropdown wrapper inside navbars.

How does Canvas Builder generate dropdown components?

Canvas Builder produces fully accessible dropdown markup with the correct ARIA attributes, data-bs-toggle wiring, and Popper.js-compatible structure. It selects the appropriate variant based on context: standard dropdowns for navigation, split buttons for action groups, and dark menus for dark-themed sections. Brand colours are applied to hover states and active items, and the generated HTML works out of the box with Bootstrap 5's bundled JavaScript.