Split button dropdowns in Bootsrap

Introduction

Split button dropdowns let users pick an action quickly or choose from more options. They combine a main button and a dropdown menu in one control.

When you want a main action and extra choices in one place.

To save space on a toolbar or menu.

When users often pick the main action but sometimes need alternatives.

To keep your interface simple but flexible.

When you want a clear, easy way to show related actions.

Syntax

Bootsrap

<div class="btn-group">
  <button type="button" class="btn btn-primary">Main Action</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action 1</a></li>
    <li><a class="dropdown-item" href="#">Action 2</a></li>
    <li><a class="dropdown-item" href="#">Action 3</a></li>
  </ul>
</div>

The btn-group wraps the buttons and dropdown menu.

The split toggle button uses dropdown-toggle-split and a hidden label for accessibility.

Examples

A green split button with a main "Save" action and two dropdown options.

Bootsrap

<div class="btn-group">
  <button type="button" class="btn btn-success">Save</button>
  <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Save &amp; Close</a></li>
    <li><a class="dropdown-item" href="#">Save &amp; New</a></li>
  </ul>
</div>

A red split button for "Delete" with extra choices in the dropdown.

Bootsrap

<div class="btn-group">
  <button type="button" class="btn btn-danger">Delete</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Delete Permanently</a></li>
    <li><a class="dropdown-item" href="#">Archive</a></li>
  </ul>
</div>

Sample Program

This page shows a blue split button with a main action and a dropdown arrow. The dropdown reveals three options. The layout is simple and responsive.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Split Button Dropdown Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="p-4">
    <h1>Split Button Dropdown Example</h1>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-primary">Main Action</button>
      <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
        <span class="visually-hidden">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Option 1</a></li>
        <li><a class="dropdown-item" href="#">Option 2</a></li>
        <li><a class="dropdown-item" href="#">Option 3</a></li>
      </ul>
    </div>

    <p class="mt-3">Click the main button to do the main action. Click the arrow to see more options.</p>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Important Notes

Always include aria-expanded and visually-hidden text for screen readers.

Use Bootstrap's JavaScript bundle to enable dropdown functionality.

Split buttons improve usability by separating the main action from other choices.

Summary

Split button dropdowns combine a main button and a dropdown arrow in one group.

They save space and make it easy to pick a default or alternative action.

Bootstrap provides simple classes to create accessible and responsive split buttons.

Practice

1. What is the main purpose of a split button dropdown in Bootstrap?

easy

A. To create a button that changes color on hover

B. To create two separate buttons side by side without any dropdown

C. To display only a dropdown menu without any main button

D. To combine a main action button with a dropdown menu for alternative actions

Solution

1. Step 1: Understand the split button dropdown concept

   A split button dropdown combines a main button for a default action and a dropdown toggle for other options.

2. Step 2: Identify the purpose in Bootstrap

   Bootstrap uses split buttons to save space and provide quick access to a main action plus alternatives.

3. Final Answer:

   To combine a main action button with a dropdown menu for alternative actions -> Option D

4. Quick Check:

   Split button = main + dropdown [OK]

Hint: Split button = main action + dropdown arrow [OK]

Common Mistakes:

• Thinking split button is two separate buttons
• Confusing split button with a single dropdown button
• Assuming split button changes color only

2. Which Bootstrap class is essential to create the dropdown toggle part of a split button dropdown?

easy

A. btn-toggle

B. dropdown-toggle

C. btn-split

D. dropdown-button

Solution

1. Step 1: Identify the class for dropdown toggle

   Bootstrap uses the class dropdown-toggle to mark the button that toggles the dropdown menu.

2. Step 2: Confirm the correct class for split button toggle

   In split buttons, the toggle button must have dropdown-toggle to work properly.

3. Final Answer:

   dropdown-toggle -> Option B

4. Quick Check:

   Dropdown toggle class = dropdown-toggle [OK]

Hint: Dropdown toggle always uses class dropdown-toggle [OK]

Common Mistakes:

• Using non-existent classes like btn-toggle
• Confusing btn-split with dropdown-toggle
• Using dropdown-button which is invalid

3. What will be the visual result of this Bootstrap split button dropdown code?

<div class="btn-group">
  <button type="button" class="btn btn-primary">Save</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Save as Draft</a></li>
    <li><a class="dropdown-item" href="#">Save and Publish</a></li>
  </ul>
</div>

medium

A. A single blue button labeled 'Save' that opens a dropdown menu when clicked

B. Two separate blue buttons labeled 'Save' and 'Toggle Dropdown' side by side with no dropdown

C. A blue button labeled 'Save' with a small arrow next to it that opens a dropdown menu

D. A blue button labeled 'Toggle Dropdown' with no main action button

Solution

1. Step 1: Analyze the button group structure

   The code creates a button group with a main button labeled 'Save' and a split dropdown toggle button next to it.

2. Step 2: Understand the visual effect

   The main button is blue (btn-primary) and the toggle button has a small arrow (dropdown-toggle-split) that opens the dropdown menu with two options.

3. Final Answer:

   A blue button labeled 'Save' with a small arrow next to it that opens a dropdown menu -> Option C

4. Quick Check:

   Split button = main + arrow dropdown [OK]

Hint: Split button shows main label + small arrow for dropdown [OK]

Common Mistakes:

• Thinking toggle button shows text 'Toggle Dropdown'
• Assuming buttons are separate with no dropdown
• Confusing single button dropdown with split button

4. Identify the error in this split button dropdown code snippet:

<div class="btn-group">
  <button class="btn btn-secondary">Options</button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action 1</a></li>
  </ul>
</div>

medium

A. Using data-toggle instead of data-bs-toggle for Bootstrap 5

B. Missing the class dropdown-toggle-split on the toggle button

C. The dropdown-menu should be a div, not ul

D. The main button should have dropdown-toggle class

Solution

1. Step 1: Check Bootstrap 5 data attribute usage

   Bootstrap 5 uses data-bs-toggle instead of data-toggle to activate dropdowns.

2. Step 2: Identify the incorrect attribute

   The code uses data-toggle="dropdown", which is from Bootstrap 4 and will not work in Bootstrap 5.

3. Final Answer:

   Using data-toggle instead of data-bs-toggle for Bootstrap 5 -> Option A

4. Quick Check:

   Bootstrap 5 uses data-bs-toggle [OK]

Hint: Bootstrap 5 uses data-bs-toggle, not data-toggle [OK]

Common Mistakes:

• Forgetting to add dropdown-toggle-split class
• Using old data-toggle attribute
• Changing dropdown-menu from ul to div incorrectly

5. You want a split button dropdown where the main button triggers a form submission and the dropdown offers alternative submission options. Which is the best way to implement this in Bootstrap?

hard

A. Use a <form> with a main button type='submit' and a split dropdown toggle with data-bs-toggle='dropdown'

B. Use two separate buttons outside a form, one for submit and one for dropdown

C. Use a single dropdown button with all submission options inside the dropdown

D. Use a main button with type='button' and dropdown toggle without form

Solution

1. Step 1: Understand form submission with split button

   The main button should submit the form, so it needs type='submit' inside the form element.

2. Step 2: Add dropdown toggle for alternative options

   The dropdown toggle uses data-bs-toggle='dropdown' to show alternative submission choices without submitting immediately.

3. Final Answer:

   Use a <form> with a main button type='submit' and a split dropdown toggle with data-bs-toggle='dropdown' -> Option A

4. Quick Check:

   Main button submits form + dropdown toggle shows options [OK]

Hint: Main button type='submit' inside form + dropdown toggle [OK]

Common Mistakes:

• Using type='button' on main submit button
• Placing buttons outside the form
• Using single dropdown button without main submit