Split Button with Dropdown — HTML CSS JS Snippet

A split button combines a primary action button with a small dropdown trigger on the right side, separated by a subtle divider. The left half executes the default action immediately on click; the right chevron opens a menu of alternative actions. This pattern appears in deployment dashboards, content management systems, and anywhere a clear primary action exists alongside occasional secondary variants.

HTML structure

The .split-btn container uses display: inline-flex and position: relative — inline-flex so the two child buttons sit side by side without gaps, and relative to anchor the absolutely-positioned dropdown. The .main-action button receives border-radius: 8px 0 0 8px (rounded left only) and .arrow-btn receives border-radius: 0 8px 8px 0 (rounded right only). There is no wrapper with overflow: hidden because that would clip the dropdown panel.

The divider trick

The visual split between the two halves is border-left: 1px solid rgba(255,255,255,0.25) on the arrow button. Because both buttons share the same background color, a fully opaque white border would look harsh. Reducing the alpha to 25% creates a gentle inset appearance that reads as a separator without looking bolted on. This is the same technique used by GitHub's branch dropdown and Vercel's deploy button.

Dropdown animation

display: none / display: block toggling via a class is combined with a CSS @keyframes dropIn animation. When the .open class is added, the animation runs: opacity 0 → 1 and translateY -6px → 0 over 150ms. The slight upward offset on entry gives a sense that the panel is emerging from below the button rather than appearing from nowhere. Removal of the .open class hides the dropdown instantly — adding a separate exit animation would require JavaScript timing to delay the display change.

JavaScript: single-open and outside-click

toggleDropdown(id) first sweeps all open dropdowns closed, then opens the target if it was previously closed. This single-open guarantee is important when multiple split buttons share the same page. The document.addEventListener('click') handler uses e.target.closest('.split-btn') — if the click origin is not inside any split button, all dropdowns close. This covers clicking page content, other buttons, or empty space.

Accessibility

The arrow button carries aria-expanded="false" initially. JavaScript flips it to "true" when the dropdown opens. This attribute is also the CSS hook for rotating the chevron icon: .arrow-btn[aria-expanded="true"] svg { transform: rotate(180deg) }. The dropdown has role="menu" and items have role="menuitem", which assistive technologies announce as a menu. aria-label on the arrow button ("More deploy options") clarifies its purpose since it contains only an icon.

Danger/destructive action pattern

The .drop-danger class sets color and icon tint to red-600 (#dc2626) and the hover state to red-50 (#fef2f2). A .drop-divider (a 1px border-top) visually separates destructive actions at the bottom of the menu — the same convention used by macOS contextual menus and VS Code's command palette.

Variants and theming

The secondary gray variant only overrides background on both button halves — all structural CSS stays the same. This shows that theming is a single-line change per color scheme. To support dark mode, replace the hardcoded hex values with CSS custom properties: var(--btn-bg), var(--dropdown-bg), var(--dropdown-border).

React integration

In React, the component accepts primaryLabel, onPrimary, and actions (array of {label, icon, onClick, danger}). Open state is useState(false). The document click listener goes in useEffect(() => { const h = e => { ... }; document.addEventListener('click', h); return () => document.removeEventListener('click', h); }, []). The cleanup return prevents memory leaks when the component unmounts.

Vue 3 integration

Use ref(false) for isOpen and an onMounted / onUnmounted pair for the document listener. The template uses v-for on the actions array and :class="{ open: isOpen }" on the dropdown div. Pass the danger flag as :class="{ 'drop-danger': action.danger }".

Split buttons are semantically superior to two separate buttons for primary/secondary because they communicate hierarchy — the wide left portion draws the eye to the default action, while the narrow right chevron signals optionality without cluttering the interface. Users who always use the default action never need to interact with the dropdown at all. See also the dropdown menu snippet for standalone menus, the expanding FAB snippet for a touch-first radial alternative, and the button group snippet for equal-weight segmented controls.