Split Button with Dropdown Template

Combine a default action and a set of related options into one compact, versatile control.

A split button is perfect for actions like "Save," where a dropdown can reveal less common options like "Save As" or "Export."

Get Source Code Preview

About the Split Button with Dropdown

A split button is a hybrid control that builds on the standard dropdown button. It provides a primary action that can be executed with a single click, while also giving users access to a list of secondary commands in an attached dropdown menu. This prevents the most common action from being hidden away inside a menu, greatly improving efficiency and discoverability.

Features

Efficient UX: Gives one-click access to the main action, with secondary actions neatly tucked away.
Accessible by Design: The dropdown toggle correctly uses aria-haspopup="true" and a toggling aria-expanded attribute to communicate its state to assistive technologies. The menu itself has role="menu".
Smart Dropdown Behavior: The JavaScript ensures the dropdown closes if the user clicks anywhere outside of the component.
Self-Contained: The HTML, CSS, and JavaScript work together as a single, copy-pasteable component.

Code Breakdown

The component consists of a container div, a primary action button, and a second button that serves as the dropdown toggle. Below them is a hidden ul which acts as the menu.

The JavaScript logic adds a click event listener to the dropdown toggle. When clicked, it toggles an is-open class on the container and updates the button's aria-expanded attribute. The CSS uses this class to show or hide the menu. A second event listener is attached to the document to detect clicks outside the component, ensuring the menu closes when it's no longer being used.

Code

Here is the complete code for the split button component.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Split Button with Dropdown</title>
    <style>
        /*
         Component: Split Button with Dropdown
         Description: A two-part button with a primary action and a dropdown menu.
        */
        :root {
            --split-btn-bg: #28a745;
            --split-btn-text-color: #ffffff;
            --split-btn-border-color: #23923d;
            --split-btn-bg-hover: #218838;
            --split-btn-focus-outline: #28a745;
            --split-btn-menu-bg: #ffffff;
            --split-btn-menu-shadow: 0 8px 16px rgba(0,0,0,0.15);
            --split-btn-menu-item-hover: #f8f9fa;
        }

.split-btn-container-1 {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 4rem 2rem; /* Extra padding to see dropdown */
            background-color: #f8f9fa;
        }

.split-btn-1 {
            position: relative;
            display: inline-flex;
        }
        
        .split-btn-1 button,
        .split-btn-1 a {
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.5;
            color: var(--split-btn-text-color);
            background-color: var(--split-btn-bg);
            border: 1px solid var(--split-btn-border-color);
            padding: 0.75rem 1.5rem;
            cursor: pointer;
            transition: background-color 0.15s ease-in-out;
        }
        .split-btn-1 button:hover,
        .split-btn-1 a:hover {
            background-color: var(--split-btn-bg-hover);
        }

.split-btn-main {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }

.split-btn-dropdown {
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
            border-left: none;
            padding: 0.75rem 0.75rem;
        }
        
        .split-btn-dropdown svg {
            display: block;
            width: 16px;
            height: 16px;
            fill: currentColor;
        }
        
        .split-btn-1:focus-within {
             box-shadow: 0 0 0 3px var(--split-btn-focus-outline);
             border-radius:8px;
        }

/* Menu Styles */
        .split-btn-menu {
            position: absolute;
            top: 100%;
            left: 0;
            margin-top: 0.5rem;
            list-style: none;
            padding: 0.5rem 0;
            background-color: var(--split-btn-menu-bg);
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: var(--split-btn-menu-shadow);
            min-width: 100%;
            z-index: 10;
            opacity: 0;
            transform: translateY(-10px);
            visibility: hidden;
            transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
        }
        
        .split-btn-1.is-open .split-btn-menu {
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
            transition-delay: 0s;
        }
        
        .split-btn-menu li a {
            display: block;
            padding: 0.75rem 1.5rem;
            color: #333;
            background: none;
            border: none;
            text-decoration: none;
            white-space: nowrap;
        }
        .split-btn-menu li a:hover {
            background-color: var(--split-btn-menu-item-hover);
            color: #000;
        }

</style>
</head>
<body>

<div class="split-btn-container-1">
        <div class="split-btn-1" id="splitBtn1">
            <button type="button" class="split-btn-main">Save Changes</button>
            <button type="button" class="split-btn-dropdown" aria-haspopup="true" aria-expanded="false" aria-label="More save options">
                <svg viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
            </button>
            <ul class="split-btn-menu" role="menu">
                <li><a href="#" role="menuitem">Save as New...</a></li>
                <li><a href="#" role="menuitem">Save &amp; Continue</a></li>
                <li><a href="#" role="menuitem">Export as PDF</a></li>
            </ul>
        </div>
    </div>

dropdownToggle.addEventListener('click', (event) => {
                event.stopPropagation();
                const isExpanded = dropdownToggle.getAttribute('aria-expanded') === 'true';
                if (isExpanded) {
                    closeDropdown();
                } else {
                    splitButtonContainer.classList.add('is-open');
                    dropdownToggle.setAttribute('aria-expanded', 'true');
                }
            });

document.addEventListener('click', (event) => {
                if (!splitButtonContainer.contains(event.target)) {
                    closeDropdown();
                }
            });

document.addEventListener('keydown', (event) => {
                if (event.key === 'Escape') {
                    closeDropdown();
                }
            });
        });
    </script>
</body>
</html>

View Output