Split button dropdowns in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a split button dropdown in Bootstrap?

A split button dropdown is a button group with two parts: one part triggers a main action, and the other part opens a dropdown menu with more options.

beginner

Which Bootstrap classes are essential to create a split button dropdown?

You need btn-group for grouping, btn for buttons, and dropdown-toggle with data-bs-toggle="dropdown" for the dropdown toggle button.

intermediate

How do you make the dropdown part accessible for keyboard users?

Bootstrap automatically supports keyboard navigation for dropdowns. Use semantic buttons and ensure aria-expanded updates correctly when toggling.

beginner

What role does data-bs-toggle="dropdown" play in split button dropdowns?

It tells Bootstrap’s JavaScript to toggle the dropdown menu when the button is clicked.

intermediate

Why use a split button dropdown instead of a single dropdown button?

A split button lets users quickly perform a default action with one click, or choose other options from the dropdown, improving usability.

Which class groups buttons together for a split button dropdown in Bootstrap?

A btn-group

B dropdown-menu

C btn-toggle

D dropdown-item

The btn-group class groups buttons together to create a split button dropdown.

What attribute is needed on the dropdown toggle button to open the menu?

A data-bs-toggle="dropdown"

B data-toggle="dropdown"

C aria-haspopup="true"

D role="button"

Bootstrap 5 uses data-bs-toggle="dropdown" to activate dropdown toggling.

In a split button dropdown, what does the main button do?

A Closes the dropdown menu

B Opens the dropdown menu

C Performs the default action

D Disables the dropdown

The main button performs the default or primary action immediately.

Which element contains the dropdown options in a split button dropdown?

A <code>&lt;button&gt;</code>

B <code>&lt;ul&gt;</code> or <code>&lt;div&gt;</code> with class <code>dropdown-menu</code>

C <code>&lt;div&gt;</code> with class <code>btn-group</code>

D <code>&lt;a&gt;</code> with class <code>btn</code>

The dropdown options are inside a <ul> or <div> with the dropdown-menu class.

How does Bootstrap ensure the dropdown is accessible?

A By adding <code>tabindex="-1"</code> to all buttons

B By disabling keyboard navigation

C By hiding dropdown items visually

D By using ARIA attributes and keyboard support

Bootstrap uses ARIA roles and keyboard navigation to make dropdowns accessible.

Explain how to create a split button dropdown in Bootstrap and why it is useful.

Think about grouping buttons and how users interact with them.

Describe the accessibility features Bootstrap provides for split button dropdowns.

Consider how users with keyboards or screen readers use dropdowns.