Dropdown Variants: Split Button in Bootstrap

A split button is a variation of the standard dropdown button that divides the button into two parts: one part is the main button (which performs a primary action), and the other part is a dropdown toggle (which reveals additional options). This design allows users to execute a default action directly while providing access to additional options through the dropdown.

1. Basic Split Button Structure

A split button consists of a primary button and a dropdown toggle button. Both are combined into a single component.

a. Basic Split Button

Example:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Action</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="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

• .btn-group: Groups the button and the dropdown toggle into a single button group.
• .btn: Applies primary button styling.
• .dropdown-toggle: Adds the dropdown functionality to the toggle part of the split button.
• .dropdown-toggle-split: Ensures the toggle button is split from the main button and aligns correctly.
• .visually-hidden: Hides the text within the toggle button for screen readers (important for accessibility).

2. Styling and Behavior

a. Styling

The split button has two distinct styles:

• Primary Action Button: The main button that executes the primary action when clicked.
• Dropdown Toggle Button: The small arrow or toggle part that opens the dropdown menu.

Example:

<style>
  .btn-group .btn-primary {
    border-radius: 0;
  }
  .btn-group .dropdown-toggle-split::after {
    display: none;
  }
</style>

• The .btn-group .btn-primary style removes borders to ensure the buttons appear as a single unit.
• .dropdown-toggle-split::after is often styled to hide the default dropdown indicator.

b. Behavior

When the main button is clicked, it performs the default action associated with it. When the dropdown toggle button is clicked, it opens the dropdown menu to reveal additional options.

3. Split Button Variants

a. Split Button with Icons

You can add icons to the split button for better visual representation.

Example:

<div class="btn-group">
  <button type="button" class="btn btn-primary">
    <i class="bi bi-star"></i> Action
  </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="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

• <i class="bi bi-star"></i>: Adds an icon to the main button (using Bootstrap Icons or another icon library).

b. Split Button with Different Colors

Split buttons can be styled with different colors for the main button and the dropdown toggle.

Example:

<div class="btn-group">
  <button type="button" class="btn btn-success">Primary Action</button>
  <button type="button" class="btn btn-success 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="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

• .btn-success: Applies a green color to the button.

4. Dropdown Menu Alignment

You can align the dropdown menu relative to the split button using utility classes.

a. Aligning to the Start or End

Example:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Primary Action</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 dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

• .dropdown-menu-end: Aligns the dropdown menu to the end of the button group.

Summary of Split Buttons in Bootstrap

• Basic Structure: Combine a primary button and a dropdown toggle into a single split button using .btn-group, .dropdown-toggle, and .dropdown-toggle-split.
• Styling and Behavior: Customize button appearance and behavior, ensuring the split button performs the primary action and the toggle opens the dropdown menu.
• Variants: Enhance with icons, different colors, or adjust dropdown menu alignment.