Aller au contenu principal

Propositions de barre de navigation

12 dispositions inspir뿯½es des plus grandes plateformes. Basculez entre Desktop et Mobile pour voir chaque barre se transformer en menu sandwich (cliquez le ☰ pour ouvrir le tiroir).

Comment font les grandes plateformes ? (r뿯½ponses 뿯½ tes questions)

  • Menu sandwich en mobile ? Oui, quasi universel : sous ~768 px, les liens passent dans un tiroir ☰, on garde logo + recherche (ou son ic뿯½ne) + avatar.
  • Recherche au milieu ? Sur les plateformes de contenu/cours (Coursera, Udemy, Notion, Algolia) 뿯↽ oui, centr뿯½e et large. Sur les outils dev (GitHub, Vercel, Linear) 뿯↽ plut뿯½t 뿯½ droite ou en ⌘K.
  • Langue 뿯½ c뿯½t뿯½ du profil ? Oui : on regroupe langue + th뿯½me + profil dans un “cluster utilitaire” 뿯½ droite (voir proposition n뿯½8). C’est le pattern Stripe/Intercom.
  • Ma reco pour InSkillOps (apprentissage + docs) : proposition n뿯½2 ou n뿯½8 (recherche centr뿯½e + cluster langue/th뿯½me/profil 뿯½ droite), avec repli ☰ en mobile.
Astuce : passez en Mobile pour voir le menu sandwich.
#1Classique 뿯½quilibr뿯½GitHub 뿯½ Docusaurus
Logo + liens 뿯½ gauche, cluster utilitaire 뿯½ droite (recherche, langue, th뿯½me, profil). Valeur s뿯½re, famili뿯½re.
InSkillOpsExplorer les coursParcoursTarifs Rechercher…Ctrl K FR Tableau de bordHR
#2Recherche centr뿯½eStripe 뿯½ Notion 뿯½ Algolia
La recherche occupe le centre et s’뿯½tire — id뿯½al quand la recherche est l’action n뿯½1 (plateforme de cours).
InSkillOpsCoursParcours Rechercher un cours, une comp뿯½tence…Ctrl K FR HR
#3Trois zones (grille)Vercel
Grille gauche / centre / droite parfaitement align뿯½e. Recherche toujours centr뿯½e quelle que soit la largeur.
InSkillOpsCoursTarifs
Rechercher…Ctrl K
FR HR
#4Recherche large e-learningCoursera 뿯½ Udemy
Grande barre de recherche dominante + profil 뿯½ droite. Oriente “catalogue”. Le CTA Pro pousse l’abonnement.
InSkillOps Que voulez-vous apprendre aujourd’hui ?Ctrl K FR Passer ProHR
#5Palette de commandes ⌘KLinear 뿯½ Raycast
Champ central “recherche + commandes”. Tr뿯½s moderne, orient뿯½ productivit뿯½/power-users.
InSkillOps Rechercher un cours ou taper une commande⌘K FR HR
#6MinimalisteLinear 뿯½ Vercel
뿯½pur뿯½, ic뿯½nes discr뿯½tes, beaucoup d’espace. La recherche est une ic뿯½ne. 뿯½l뿯½gant mais moins d뿯½couvrable.
InSkillOpsExplorer les coursParcoursTarifsHR
#7Navigation en pilule segment뿯½eArc 뿯½ Framer
Les liens vivent dans une capsule centrale avec 뿯½tat actif. Distinctif, tr뿯½s “produit”.
InSkillOpsCoursParcoursTarifs Rechercher…Ctrl KHR
#8Cluster utilitaire group뿯½Stripe 뿯½ Intercom
Langue + th뿯½me + profil r뿯½unis dans une seule capsule 뿯½ droite 뿯↽ r뿯½pond 뿯½ “langue 뿯½ c뿯½t뿯½ du profil”. Tr뿯½s propre.
InSkillOpsExplorer les coursParcoursTarifs Rechercher…Ctrl K FR HR
#9Deux lignesAmazon 뿯½ Udemy
Ligne 1 : logo + recherche + profil. Ligne 2 : cat뿯½gories. Excellent quand il y a beaucoup de liens.
InSkillOps Rechercher un cours…Ctrl K FR HR
CloudDevOpsS뿯½curit뿯½DataIA
#10Recherche ic뿯½ne extensibleYouTube 뿯½ mobile-first
La recherche est une ic뿯½ne qui s’ouvre en champ. Gagne de la place, tr뿯½s adapt뿯½ au responsive.
InSkillOpsExplorer les coursParcoursTarifs FR Tableau de bordHR
#11CTA d’abonnement mis en avantSaaS 뿯½ Duolingo
Un bouton plein “Passer Pro” attire l’œil vers la conversion, 뿯½ c뿯½t뿯½ du profil.
InSkillOpsExplorer les coursParcoursTarifs Rechercher…Ctrl K Passer ProHR
#12Menu sandwich permanent + top barGitLab 뿯½ docs
Le ☰ est toujours pr뿯½sent 뿯½ gauche (ouvre un tiroir/sidebar). Barre du haut ultra l뿯½g뿯½re. Id뿯½al sites tr뿯½s riches.
InSkillOps Rechercher…Ctrl K FR HR