ButtonsLesson 100Free preview
Split Buttons
This lesson is part of How To · All levels
Summary
The split button combines one main action with an arrow menu that contains additional actions. The left side immediately executes the main command, while the right side opens a list of other options. This pattern saves space without hiding the most common action.
Key points
- The split button consists of the main action button and the dropdown arrow button.
- The two parts are placed in a container to look like they're united.
- The dropdown menu uses position: absolute and is hidden by default.
- JavaScript toggles classes to open and close menus.
- The aria-expanded and aria-label attributes help users read the screen.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.