Le drawer est le pattern le plus schizophrène du UI design. Sur mobile, il se cache derrière un hamburger et glisse quand on l’appelle. Sur desktop, il vit en permanence comme sidebar. Même composant, deux vies.
Le problème, c’est que la plupart des drawers sont construits pour un seul contexte. Un hamburger menu qui fonctionne sur mobile mais qui reste un hamburger sur un écran de 27 pouces. Une sidebar desktop qui disparaît simplement sur mobile sans offrir d’alternative. Un panneau de détails qui écrase le contenu au lieu de cohabiter avec lui. Chaque drawer mal pensé est une navigation cassée.
Un modal dit « arrête-toi et réponds ». Un drawer dit « voilà plus, quand tu veux ». C’est une cohabitation, pas une interruption.
The drawer is the most schizophrenic pattern in UI design. On mobile, it hides behind a hamburger and slides in when called. On desktop, it lives permanently as a sidebar. Same component, two lives.
The problem is that most drawers are built for a single context. A hamburger menu that works on mobile but stays a hamburger on a 27-inch screen. A desktop sidebar that simply vanishes on mobile with no alternative. A detail panel that crushes content instead of coexisting with it. Every poorly built drawer is broken navigation.
A modal says “stop and answer.” A drawer says “here’s more, when you want it.” It’s a cohabitation, not an interruption.
Ce qu’il ne faut pas faire
What not to do
Le premier couvre 100% de l’écran — l’utilisateur perd tout contexte spatial. Le deuxième empile deux drawers qui écrasent le contenu central. Le troisième apparaît sans animation, sans backdrop, derrière le header — un fantôme que rien ne signale.
The first covers 100% of the screen — the user loses all spatial context. The second stacks two drawers that crush the central content. The third appears with no animation, no backdrop, behind the header — a ghost that nothing signals.
Étape 1 — Le navigation drawer, bien fait
Le hamburger menu est le drawer le plus répandu sur mobile. Tout le monde le connaît. Peu de gens le font bien.
Un bon navigation drawer glisse avec un spring naturel, montre un backdrop flou qui maintient le contexte spatial, et se ferme au swipe, au clic backdrop, ou à Escape. Il ne couvre jamais 100% de la largeur — la bande visible de la page derrière rappelle à l’utilisateur où il est.
Step 1 — The navigation drawer, done right
The hamburger menu is the most common drawer on mobile. Everyone knows it. Few people get it right.
A good navigation drawer slides with a natural spring, shows a blurred backdrop that maintains spatial context, and closes on swipe, backdrop click, or Escape. It never covers 100% of the width — the visible strip of the page behind reminds the user where they are.
Glisse le drawer vers la gauche pour le fermer — le geste est aussi naturel que de pousser un tiroir. Le backdrop flou laisse entrevoir la page derrière, et l’animation spring donne du poids physique au panneau.
Les clés d’un bon navigation drawer
- Largeur 80% max — Jamais 100%. La bande visible maintient le contexte
- Swipe-to-close — Le geste le plus intuitif sur mobile. Si le vélocité ou le déplacement dépasse le seuil, fermer
- Backdrop animé séparément — L’opacité du backdrop n’est pas liée à la position du drawer
- Focus trap — Le focus clavier reste dans le drawer tant qu’il est ouvert
- Escape ferme — Standard d’accessibilité, non négociable
Swipe the drawer to the left to close it — the gesture is as natural as pushing a physical drawer shut. The blurred backdrop lets the page peek through, and the spring animation gives the panel physical weight.
Keys to a good navigation drawer
- 80% max width — Never 100%. The visible strip maintains context
- Swipe-to-close — The most intuitive gesture on mobile. If velocity or displacement exceeds the threshold, close
- Backdrop animated separately — The backdrop opacity is not tied to the drawer position
- Focus trap — Keyboard focus stays inside the drawer while open
- Escape closes — Accessibility standard, non-negotiable
Étape 2 — Le detail drawer (panneau latéral droit)
Le drawer ne sert pas qu’à la navigation. Le panneau latéral droit est le pattern des clients mail (cliquer un email, le détail s’ouvre à droite), des dashboards admin, et des panneaux de propriétés à la Figma.
La différence clé : quand l’utilisateur clique un autre élément pendant que le drawer est ouvert, le panneau ne se ferme pas et ne se rouvre pas. Le contenu à l’intérieur transite vers le nouvel élément. C’est la fluidité qui distingue un bon detail drawer d’un modal déguisé.
Step 2 — The detail drawer (right side panel)
The drawer isn’t just for navigation. The right side panel is the pattern used by email clients (click an email, detail opens on the right), admin dashboards, and property panels like Figma’s.
The key difference: when the user clicks another item while the drawer is open, the panel doesn’t close and reopen. The content inside transitions to the new item. This fluidity is what separates a good detail drawer from a disguised modal.
Clique sur différents éléments : le drawer reste ouvert, seul le contenu transite. Pas de fermeture-réouverture, pas de flash. Le panneau est un conteneur stable dont le contenu change.
Quand utiliser un detail drawer
- Listes master-detail — Email, fichiers, tickets, utilisateurs
- Panneaux de propriétés — Inspector Figma, settings contextuel
- Preview rapide — Voir un élément sans quitter la liste
- Formulaires auxiliaires — Édition inline sans navigation
Click different items: the drawer stays open, only the content transitions. No close-reopen, no flash. The panel is a stable container whose content changes.
When to use a detail drawer
- Master-detail lists — Email, files, tickets, users
- Property panels — Figma inspector, contextual settings
- Quick preview — See an item without leaving the list
- Auxiliary forms — Inline editing without navigation
Étape 3 — Le responsive drawer : sidebar ↔ drawer
Le pattern unique du drawer que les autres overlays ne peuvent pas reproduire : un composant qui est une sidebar permanente sur grand écran et un drawer temporaire sur petit écran. C’est le socle de toute app SaaS (Gmail, Slack, Notion, Linear).
Trois états, un seul composant : expanded (sidebar complète), collapsed (rail d’icônes), drawer (overlay mobile). La transition entre les trois doit être fluide — l’utilisateur ne doit jamais sentir qu’il utilise un “mode différent”.
Step 3 — The responsive drawer: sidebar ↔ drawer
The unique drawer pattern that other overlays can’t replicate: a component that is a permanent sidebar on wide screens and a toggleable drawer on narrow screens. This is the foundation of every SaaS app (Gmail, Slack, Notion, Linear).
Three states, one component: expanded (full sidebar), collapsed (icon rail), drawer (mobile overlay). The transition between the three should be seamless — the user should never feel they are using a “different mode.”
Basculez entre les modes Desktop et Mobile : le même contenu de navigation s’adapte. Sur desktop, la sidebar peut se réduire en rail d’icônes. Sur mobile, elle devient un drawer overlay classique.
Les trois états
- Expanded (desktop) — Sidebar complète avec icônes et labels, visible en permanence. Le contenu principal s’ajuste
- Collapsed (desktop) — Rail d’icônes de 56px. Un clic expand, un survol peut afficher un tooltip
- Drawer (mobile) — Overlay avec backdrop, slide-in depuis la gauche. Même contenu que la sidebar, mais temporaire
Toggle between Desktop and Mobile modes: the same navigation content adapts. On desktop, the sidebar can collapse to an icon rail. On mobile, it becomes a classic overlay drawer.
The three states
- Expanded (desktop) — Full sidebar with icons and labels, permanently visible. Main content adjusts
- Collapsed (desktop) — 56px icon rail. A click expands, a hover can show a tooltip
- Drawer (mobile) — Overlay with backdrop, slide-in from the left. Same content as the sidebar, but temporary
Aller plus loin — Patterns créatifs
Going further — Creative patterns
Le peek drawer — Tirer pour révéler
Et si le drawer n’avait pas besoin d’un bouton ? Le peek drawer montre un onglet discret sur le bord de l’écran — une affordance physique que l’utilisateur peut tirer pour révéler le contenu. Comme un tiroir physique avec une poignée qui dépasse.
Le drag suit le doigt avec une tension élastique. Si l’utilisateur relâche au-delà de 40%, le drawer snap open. En-dessous, il snap closed. La physique du geste rend l’interaction tangible.
The peek drawer — Pull to reveal
What if the drawer didn’t need a button? The peek drawer shows a subtle tab on the screen edge — a physical affordance the user can pull to reveal content. Like a physical drawer with a handle sticking out.
The drag follows the finger with elastic tension. If the user releases past 40%, the drawer snaps open. Below that, it snaps closed. The gesture physics make the interaction tangible.
Le parallax reveal — Le contenu s’écarte
Et si le drawer ne glissait pas par-dessus le contenu, mais que le contenu s’écartait pour le révéler ? Le parallax reveal inverse la hiérarchie : la page se scale down, s’arrondit et glisse sur le côté — comme si on tirait un rideau. Le drawer est toujours là, en dessous, attendant d’être découvert.
L’effet de profondeur est saisissant : la page réduite avec ses coins arrondis ressemble à une carte posée sur un bureau. Un simple tap la remet en place.
The parallax reveal — Content steps aside
What if the drawer didn’t slide over the content, but the content stepped aside to reveal it? The parallax reveal inverts the hierarchy: the page scales down, rounds its corners, and slides to the side — as if pulling back a curtain. The drawer is always there, underneath, waiting to be discovered.
The depth effect is striking: the scaled-down page with rounded corners looks like a card placed on a desk. A simple tap puts it back in place.
Le content push — Le contenu fait place
Au lieu de recouvrir le contenu, le drawer le pousse. Le contenu principal se déplace physiquement pour faire de la place. Pas de backdrop, pas d’overlay — les deux panneaux sont interactifs simultanément. C’est le pattern Gmail, Google Docs, et la plupart des apps de productivité desktop.
La clé : le drawer et le contenu doivent s’animer avec le même spring pour bouger comme une seule unité.
The content push — Content makes room
Instead of covering the content, the drawer pushes it. The main content physically moves to make room. No backdrop, no overlay — both panels are interactive simultaneously. This is the Gmail, Google Docs, and most desktop productivity apps pattern.
The key: the drawer and content must animate with the same spring to move as a single unit.
Le bon drawer au bon moment
Le drawer n’est pas le cousin du modal — c’est un outil de navigation spatiale. Un modal dit « arrête-toi ». Un drawer dit « voilà plus, quand tu veux ».
- Navigation mobile → Navigation drawer, swipe-to-close, 80% largeur
- Détails d’un élément → Detail drawer droit, transition de contenu fluide
- App SaaS / admin → Responsive drawer, sidebar ↔ rail ↔ overlay
- Contenu secondaire → Peek drawer, onglet physique sur le bord
- Expérience immersive → Parallax reveal, le contenu s’écarte comme un rideau
- Sidebar persistante → Content push, les deux panneaux interactifs
Le meilleur drawer est celui qui s’adapte à son contexte si naturellement que l’utilisateur ne se demande jamais s’il devrait être là.
The right drawer at the right time
The drawer is not the modal’s cousin — it’s a spatial navigation tool. A modal says “stop.” A drawer says “here’s more, when you want it.”
- Mobile navigation → Navigation drawer, swipe-to-close, 80% width
- Item details → Right detail drawer, fluid content transition
- SaaS / admin app → Responsive drawer, sidebar ↔ rail ↔ overlay
- Secondary content → Peek drawer, physical tab on the edge
- Immersive experience → Parallax reveal, content steps aside like a curtain
- Persistent sidebar → Content push, both panels interactive
The best drawer is one that adapts to its context so naturally the user never questions whether it should be there.