You’ve seen it. Even if you didn't know what it was called, you’ve definitely clicked it. Most people call it the "meatballs" menu or just "those three dots," but in the world of professional UX design, the bread board menu—horizontal or vertical—is a silent workhorse that manages to be both incredibly useful and deeply frustrating.
It's everywhere. LinkedIn uses it to hide post options. Google Workspace relies on it to tuck away sharing settings. It's the digital equivalent of a junk drawer, but a really organized one.
The actual anatomy of a bread board menu
Let's get the terminology straight because it's messy. Some designers call the three vertical dots a "kebab menu" and the three horizontal dots a "meatballs menu." The term bread board menu often refers to the horizontal variety ($\cdots$), mimicking the layout of components on an electronic prototyping board. It’s a pattern born of necessity. When mobile screens became the primary way we consume data, there simply wasn't enough real estate to show "Edit," "Delete," "Share," "Report," and "View History" all at once.
The genius is in the economy.
One icon. Infinite possibilities.
But there’s a dark side. Luke Wroblewski, a product director at Google and a legend in the world of mobile design, has famously critiqued these "overflow" patterns. Why? Because they hide functionality. If a user can’t see an action, they often assume it doesn't exist. It’s the "out of sight, out of mind" problem. Honestly, if you're tucking your most important feature behind a bread board menu, you're basically asking your users to fail.
Why designers can't stop using it
It keeps things clean. That's the main draw. Imagine your Facebook feed if every single post had six or seven visible buttons underneath it. It would look like a 1998 Excel spreadsheet. The bread board menu acts as a visual filter, separating primary actions from secondary ones.
Think about the hierarchy:
- Primary Action: Like, Comment, Send. (Visible)
- Secondary Action: Save post, Turn off notifications, Why am I seeing this? (Hidden)
By using the bread board menu for that second group, designers reduce cognitive load. You aren't overwhelming the brain with choices it doesn't need to make right this second. It’s a psychological trick to keep the user focused on the core value of the app.
The accessibility gap most devs miss
Here is where things get tricky. While the bread board menu looks sleek, it’s often a nightmare for accessibility if not handled correctly. Screen readers like VoiceOver or TalkBack need to know what those dots represent. If a developer just throws an icon on a button without an aria-label, the screen reader might just say "Button, image."
That's useless.
📖 Related: No Line Left to Cross: Why the Ethics of Modern Technology Feel Like a Fever Dream
A high-quality implementation requires specific metadata. It should say something like "More options for [Item Name]." Furthermore, the tap target size is a huge issue. Apple's Human Interface Guidelines suggest a minimum tap target of 44x44 points. Many bread board menus are tiny, floating dots that are nearly impossible for someone with limited motor dexterity to hit accurately on the first try. You end up clicking the link next to it instead. Annoying, right?
Real-world failure: The "Mystery Meat" Navigation
Back in the early 2000s, there was a term called "Mystery Meat Navigation." It referred to buttons that didn't tell you what they did until you hovered over them. The bread board menu is the modern version of this.
I was recently looking at a SaaS dashboard where the "Delete Project" button was hidden inside a bread board menu, which was itself tucked inside a sub-tab. It took me four minutes to find it. That's a failure. If an action is high-stakes or frequently used, burying it is a design sin.
On the flip side, look at Spotify. They use the horizontal overflow menu brilliantly. In a playlist, the dots give you "Add to queue," "Go to radio," and "Show credits." These aren't things you do every second, but you know exactly where to find them when you need them. They’ve trained us.
The technical implementation (and why it breaks)
If you're building one, don't just use a generic icon font. Use SVG.
✨ Don't miss: The lbs to metric tons Conversion: Why Most People Get It Wrong
Why? Because icon fonts can break if the CDN fails, leaving a weird box character where your menu should be. An inline SVG ensures the bread board menu is always there.
Also, consider the "Positioning Problem." When you click the dots, where does the menu appear? If it’s at the bottom of a mobile screen, the menu should probably slide up like a "bottom sheet." If it’s on a desktop, it should probably be a dropdown anchored to the dots.
One of the biggest mistakes is not accounting for screen edges. If your bread board menu is on the far right of the screen and the dropdown opens to the right, it gets cut off. You’d think this is basic stuff, but I see it in production apps from billion-dollar companies all the time.
When to ditch the dots
Sometimes the best bread board menu is no menu at all. If you only have two extra options, just show them. If you have ten, maybe you need a dedicated "Settings" page instead of a massive, scrolling overflow list.
Research from the Nielsen Norman Group suggests that users are significantly slower at completing tasks when they are hidden behind these menus. In a study on hamburger menus (the bread board’s cousin), they found that hidden navigation was used 21% less than visible or partially hidden navigation.
Ask yourself these questions before adding those dots:
- Is this action essential for the user to complete their primary goal? (If yes, don't hide it).
- Does the icon have a clear tap target?
- Is there a text label nearby to provide context?
- How does this look on a 5-inch screen versus a 27-inch monitor?
Actionable insights for your next project
Stop treating the bread board menu as a catch-all for lazy design. It’s a tool for prioritization, not a closet for things you're too tired to organize.
📖 Related: How Can I Hide Mutual Friends on Facebook: The Truth About Privacy Limits
- Prioritize by frequency: Use data to see which items in the menu are actually clicked. If "Edit" is clicked 90% of the time, pull it out of the menu and make it a visible button.
- Use Tooltips: On desktop, a simple hover tooltip that says "More Options" can bridge the gap for new users.
- Standardize: Stick to either vertical or horizontal dots throughout your entire app. Mixing them is confusing and makes your UI feel disjointed.
- Test with real thumbs: Open your app on the smallest phone you can find. Try to hit that menu while walking. If you can't, it's too small.
The bread board menu isn't going anywhere. It’s too baked into our muscle memory now. But as users get more "filter-blind" to these icons, the way we implement them has to get smarter. Keep the clutter down, keep the labels clear, and for heaven's sake, make sure the tap target is big enough for a human thumb.
Don't hide the important stuff. Just organize the rest.