0
0
Bootsrapmarkup~5 mins

Split button dropdowns in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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>
OutputSuccess
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.