Menu button

Tuck a handful of actions — share, export, edit, delete — behind one tidy button that works the same with a mouse, a keyboard or a screen reader.

Also called

dropdown buttonaction menukebab menuthree-dot menumore options menuBootstrap dropdown

What it replaces

• Bootstrap’s dropdown component
• page-builder “dropdown button” modules
• hand-rolled hover dropdowns that a keyboard cannot open

Accessibility

Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.

• The WAI-ARIA Authoring Practices menu button: the button has aria-haspopup="menu", aria-expanded and aria-controls; the menu is role="menu", labeled by the button, and its items are role="menuitem" (or "menuitemradio" with aria-checked) with tabindex="-1", so the menu is one Tab stop.
• On the button, Enter, Space and ↓ open the menu on the first item (the checked one in a radio menu) and ↑ opens it on the last. In the menu, ↓ ↑ move and wrap, Home and End jump, a letter moves to the next item starting with it, Enter and Space activate, Escape closes and returns focus to the button, Tab closes and moves on.
• A click outside or focus leaving the element closes the menu. A disabled item is aria-disabled: reachable and announced, not activatable.
• The menu opens below the button, or above it when the room below is short and there is more above, measured each time it opens; it never runs off the side of the viewport.
• Buttons and items are at least 44px tall; the icon-only button is 44px square with its full label as aria-label.
• prefers-reduced-motion: the menu appears without its 120 ms fade.
• Without JavaScript it is a <details>: the summary shows the same label and opens the same list, and link items work. No menu roles are rendered until the script can honor them.

Where it's live

• superherotech.ai: /elements/menu-button/ (demo)

How to ask for it

“The menu-button on our home page, with …”

Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.

More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.