Ouvrez n’importe quel article de design system et comptez les références culinaires. Hamburger menu. Kebab menu. Meatball menu. Toast notification. Breadcrumb navigation. Cookie consent. On ne conçoit pas des interfaces — on dresse un buffet.
Quelque part dans l’histoire du web, quelqu’un a regardé trois lignes horizontales et a pensé “ça ressemble à un hamburger”. Et au lieu de le corriger, l’industrie entière a dit “oui, et les trois points verticaux, c’est un kebab”. On a ensuite ajouté le bento, le döner, le sandwich, et les chips. Le design d’interface, c’est un menu de restaurant déguisé en spécification technique.
Cet article est un tour de table — ou plutôt un tour de buffet — de tous les patterns culinaires qui peuplent nos interfaces. Avec des démos interactives, parce qu’on ne parle pas de nourriture sans goûter.
Open any design system article and count the food references. Hamburger menu. Kebab menu. Meatball menu. Toast notification. Breadcrumb navigation. Cookie consent. We’re not designing interfaces — we’re catering a buffet.
Somewhere in web history, someone looked at three horizontal lines and thought “that looks like a hamburger.” And instead of correcting them, the entire industry said “yes, and the three vertical dots — that’s a kebab.” Then came the bento, the döner, the sandwich, and the chips. Interface design is a restaurant menu disguised as a technical specification.
This article is a tour de table — or rather a tour de buffet — of every culinary pattern living in our interfaces. With interactive demos, because you don’t talk about food without tasting.
Le buffet des menus
Tout a commencé avec le hamburger. Trois lignes. Un icône si universelle qu’elle n’a même plus besoin d’explication. Mais les designers, affamés de variété, ne se sont pas arrêtés là. Ils ont inventé tout un menu de menus.
Cinq icônes. Cinq plats. Tous font “ouvrir un truc” — mais chacun a son contexte, son placement, et son public. Interchangez-les et l’utilisateur cherche son menu comme un touriste cherche son restaurant dans une rue inconnue.
The menu buffet
It all started with the hamburger. Three lines. An icon so universal it no longer needs explanation. But designers, hungry for variety, didn’t stop there. They invented a whole menu of menus.
Five icons. Five dishes. All do “open a thing” — but each has its context, placement, and audience. Swap them around and the user searches for their menu like a tourist looking for a restaurant on an unfamiliar street.
Cliquez chaque icône et observez : même contenu, contexte totalement différent. Le hamburger cache une navigation entière. Le kebab révèle des actions sur un élément. Le meatball propose des options dans une barre. Le bento switch entre apps. Et le döner filtre une liste.
La règle du buffet : ne servez pas un kebab quand le client attend un hamburger. Chaque menu a son plat attitré.
Click each icon and observe: same content, totally different context. The hamburger hides an entire navigation. The kebab reveals actions on an item. The meatball offers options in a toolbar. The bento switches between apps. And the döner filters a list.
The buffet rule: don’t serve a kebab when the customer expects a hamburger. Each menu has its designated dish.
Le breadcrumb — Le petit Poucet du web
Hansel et Gretel laissaient des miettes de pain pour retrouver leur chemin. Les designers font pareil, sauf que les oiseaux ne mangent pas les <nav aria-label="breadcrumb">.
Le breadcrumb est le GPS le plus sous-estimé du web. Pas flashy, pas animé, souvent oublié. Mais sans lui, l’utilisateur perdu dans une arborescence de 6 niveaux ne sait plus s’il est dans Paramètres > Sécurité > Authentification ou dans Paramètres > Notifications > Email. Et il panique.
The breadcrumb — Hansel and Gretel’s legacy
Hansel and Gretel left breadcrumbs to find their way home. Designers do the same, except birds don’t eat <nav aria-label="breadcrumb">.
The breadcrumb is the web’s most underrated GPS. Not flashy, not animated, often forgotten. But without it, the user lost in a 6-level hierarchy doesn’t know if they’re in Settings > Security > Authentication or Settings > Notifications > Email. And they panic.
Naviguez dans l’arborescence : chaque niveau est cliquable, et le breadcrumb vous ramène instantanément. Pas de bouton retour répété 4 fois, pas de navigation mentale — juste un chemin de miettes lisible et direct.
Le breadcrumb parfait est invisible quand tout va bien et indispensable quand on est perdu. Comme un bon GPS — ou de bonnes miettes de pain.
Navigate the tree: each level is clickable, and the breadcrumb brings you back instantly. No repeated back button, no mental navigation — just a readable, direct trail of crumbs.
The perfect breadcrumb is invisible when everything’s fine and indispensable when you’re lost. Like a good GPS — or good breadcrumbs.
Le cookie — Le gâteau empoisonné
Ah, le cookie. Un petit fichier texte inventé en 1994, nommé d’après les fortune cookies, devenu le symbole de tout ce qui ne va pas avec le consentement sur le web.
Le design du cookie consent est un cas d’école de dark patterns culinaires. Le bouton “Tout accepter” est vert, large, accueillant. Le bouton “Gérer les préférences” est gris, petit, coincé dans un coin. “Tout refuser” ? Bonne chance — il est probablement caché derrière trois pages de toggles et un CAPTCHA.
The cookie — The poisoned pastry
Ah, the cookie. A small text file invented in 1994, named after fortune cookies, now the symbol of everything wrong with consent on the web.
Cookie consent design is a masterclass in culinary dark patterns. The “Accept all” button is green, wide, welcoming. The “Manage preferences” button is gray, small, tucked in a corner. “Reject all”? Good luck — it’s probably hidden behind three pages of toggles and a CAPTCHA.
La version de gauche est un dark pattern classique — le chemin vers “refuser” est un labyrinthe. La version de droite traite les deux choix avec le même poids visuel. Même fonctionnalité, respect opposé.
Fun fact : le RGPD exige que refuser soit aussi simple qu’accepter. Le fait que ce ne soit presque jamais le cas devrait nous inquiéter plus que la quantité de sucre dans un vrai cookie.
The left version is a classic dark pattern — the path to “reject” is a maze. The right version treats both choices with equal visual weight. Same functionality, opposite respect.
Fun fact: GDPR requires that rejecting be as easy as accepting. The fact that this is almost never the case should worry us more than the sugar content of an actual cookie.
Les chips — Les pépites de l’interface
Pas les frites, les chips — ces petits tags arrondis qu’on retrouve partout : filtres, catégories, sélection multiple, suggestions. Google les a popularisés dans Material Design, et ils se sont répandus comme des cacahuètes dans un apéro.
Un chip a un superpouvoir : il montre et contrôle en même temps. Il affiche l’état actuel (ce qui est sélectionné) tout en permettant de le changer d’un tap. C’est un bouton qui porte son label sur lui-même — compact, lisible, satisfaisant à taper.
The chips — Interface sprinkles
Not fries, chips — those small rounded tags found everywhere: filters, categories, multi-select, suggestions. Google popularized them in Material Design, and they spread like peanuts at an aperitif.
A chip has a superpower: it shows and controls at the same time. It displays the current state (what’s selected) while letting you change it with a tap. It’s a button that wears its own label — compact, readable, satisfying to tap.
Le sandwich — La structure comestible
Header. Contenu. Footer. Trois couches. Un sandwich.
C’est le layout le plus fondamental du web, et personne ne l’appelle officiellement “sandwich” — mais tout le monde le pense. Le header est la tranche du dessus (navigation, logo, actions). Le contenu est la garniture (ce pourquoi l’utilisateur est là). Le footer est la tranche du dessous (liens légaux, copyright, le désert des éléments dont personne ne sait quoi faire).
La question existentielle du sandwich layout : le footer doit-il coller au bas de l’écran quand le contenu est court, ou flotter au milieu du vide comme un pain abandonné ?
The sandwich — The edible structure
Header. Content. Footer. Three layers. A sandwich.
It’s the most fundamental web layout, and nobody officially calls it a “sandwich” — but everyone thinks it. The header is the top slice (navigation, logo, actions). The content is the filling (what the user came for). The footer is the bottom slice (legal links, copyright, the graveyard of elements nobody knows what to do with).
The existential sandwich question: should the footer stick to the bottom when content is short, or float in the middle of the void like an abandoned slice of bread?
Le toast — Le message éphémère
On ne pouvait pas parler de nourriture dans le design sans mentionner le toast. Cette petite notification qui apparaît, communique, et disparaît — souvent en moins de 5 secondes. Nommée d’après le toast qui saute du grille-pain : il apparaît, on le prend, et il est parti.
Le toast est le digestif du repas UI. Il arrive après l’action (“Fichier enregistré”, “Message envoyé”), confirme que tout s’est bien passé, et s’efface sans demander d’attention. Le snack bar, son cousin Material Design, ajoute un bouton d’action (“Annuler”) — parce que parfois, même après le digestif, on veut changer d’avis.
On a consacré un article entier aux toast notifications — avec des démos interactives, les règles d’un bon toast, et les anti-patterns à éviter. Parce que même un toast de 4 secondes peut mal tourner.
The toast — The ephemeral message
You can’t talk about food in design without mentioning the toast. That small notification that appears, communicates, and disappears — often in under 5 seconds. Named after the toast that pops out of a toaster: it appears, you grab it, and it’s gone.
The toast is the digestif of the UI meal. It arrives after the action (“File saved”, “Message sent”), confirms everything went well, and fades without demanding attention. The snack bar, its Material Design cousin, adds an action button (“Undo”) — because sometimes, even after the digestif, you want to change your mind.
We dedicated an entire article to toast notifications — with interactive demos, the rules of a good toast, and anti-patterns to avoid. Because even a 4-second toast can go wrong.
Le menu complet
Si on récapitule la carte :
- Entrée → Breadcrumb, pour savoir où on est avant de commander
- Plat principal → Sandwich layout, la structure de chaque page
- Accompagnements → Chips, pour filtrer et assaisonner le contenu
- Carte des menus → Hamburger, kebab, meatball, bento, döner — un menu pour chaque occasion
- Dessert → Cookie consent, le gâteau qu’on n’a pas commandé mais qu’on est forcé de goûter
- Digestif → Toast notification, la note qui arrive après le repas
La prochaine fois qu’un collègue vous demande “c’est quoi un meatball menu ?”, vous pourrez répondre avec assurance : “c’est trois points horizontaux, et oui, quelqu’un a vraiment décidé que ça ressemblait à des boulettes de viande.”
Bon appétit.
The full course
If we recap the menu:
- Starter → Breadcrumb, to know where you are before ordering
- Main course → Sandwich layout, the structure of every page
- Side dishes → Chips, to filter and season the content
- Menu card → Hamburger, kebab, meatball, bento, döner — a menu for every occasion
- Dessert → Cookie consent, the pastry you didn’t order but are forced to taste
- Digestif → Toast notification, the note that arrives after the meal
Next time a colleague asks “what’s a meatball menu?”, you can confidently answer: “it’s three horizontal dots, and yes, someone really decided it looked like meatballs.”
Bon appétit.