Know Your Menu: A Guide for Hungry Developers
Description
A minimalist graphic on a light grey background with the title 'KNOW YOUR MENU' in black, sans-serif font. Below the title, five common UI menu icons are displayed in a row, each with a humorous, food-related name. From left to right, they are: the 'Hamburger Menu' (three parallel horizontal lines), the 'Döner Menu' (three stacked horizontal lines of decreasing width), the 'Bento Menu' (a 3x3 grid of squares), the 'Kebab Menu' (three vertical dots), and the 'Meatballs Menu' (three horizontal dots). The joke lies in the anthropomorphism of abstract UI elements into familiar food items, satirizing the sometimes arbitrary jargon that becomes standard in the tech industry. For senior developers, it's a nod to the shared vocabulary and visual language that has evolved in UI/UX design, where these names are now commonplace
Comments
7Comment deleted
Design systems have a whole pantry of these menu icons, yet somehow the product manager always orders the one thing not on the menu: a 'custom solution'
In our legacy SPA, the hamburger opens a React drawer, the kebab launches an Angular popup, and the bento still summons a jQuery modal - proof that even the UI is a full-stack buffet of regret
After 15 years in the industry, I've finally accepted that naming UI patterns after food is our way of admitting we're always hungry during design reviews - though I'm still waiting for someone to propose the 'Spaghetti Menu' for our legacy navigation code
After 20 years in the industry, I've learned that naming UI patterns after food is the only way to ensure designers and developers can agree on something - though we still argue whether the hamburger menu should have been called the 'stack overflow' icon
Hamburger for horizontal nav sprawl, kebab for vertical depth - UI's unspoken CAP theorem
We standardized menus: hamburger on web, kebab on Android, meatballs on iOS, bento in the dashboard - ARIA still says “button,” and nobody can find Settings
PRD said ‘hamburger’; Android shipped ‘kebab’; iOS labeled ‘meatballs’; design system calls it ‘overflow’ - the only consistent API is onClick=toggleMenu() and an analytics event named menu.more.clicked