Menu hamburger Wix Studio : une navigation mobile simple 🍔

Le menu hamburger, c’est l’icône à trois traits horizontaux que vous voyez sur presque tous les sites mobiles. Un clic, et le menu s’ouvre dans un panneau ou en plein écran.

En bref : sur Wix Studio, ajoutez un menu hamburger depuis « Ajouter des éléments », rubrique des menus, ou transformez votre menu existant en hamburger sur le point de rupture mobile, depuis sa mise en page. Le bouton, le panneau, le fond et les liens se personnalisent entièrement.

À quoi sert un menu hamburger ?

Sur un petit écran, un menu horizontal de six liens ne tient pas. Le hamburger cache la navigation jusqu’au clic : la page reste lisible et le visiteur garde l’accès à toutes vos pages. C’est aussi une solution pour les sites très épurés sur ordinateur.

Les éléments d’un menu hamburger Wix Studio

Comment ajouter un menu hamburger sur Wix Studio

1. Cliquez sur « Ajouter des éléments », puis ouvrez la rubrique des menus (Menu & Search).

2. Choisissez les menus hamburger (Hamburger Menus) et glissez le modèle voulu dans votre header.

3. Ouvrez le menu (Edit Menu), puis « Gérer le menu » pour choisir vos liens.

4. Personnalisez le bouton, le panneau et les liens depuis l’Inspecteur Wix Studio (le panneau de réglages à droite).

Afficher le hamburger seulement sur mobile

Avec le nouveau composant menu, inutile d’ajouter un second menu. Sélectionnez votre menu sur le point de rupture mobile, ouvrez sa mise en page (icône Layout) et choisissez le type Hamburger. Sur ordinateur, il reste une barre horizontale. Pour bien comprendre les tailles d’écran, lisez la fiche breakpoints Wix Studio.

Bonnes pratiques pour un menu hamburger efficace

• Gardez peu de liens : vos pages principales et le contact.

• Affichez le mot « Menu » à côté de l’icône si votre public est peu habitué au web : Wix permet d’afficher un texte, une icône ou les deux.

• Soignez le contraste entre le fond du panneau et les liens.

• Sur un site one page, reliez aussi vos ancres Wix Studio au menu hamburger.

• Testez l’ouverture et la fermeture sur un vrai téléphone avant de publier.

À savoir : l’ancien mega menu n’est pas disponible dans le menu hamburger. Les dropdowns du nouveau menu fonctionnent, mais sur mobile, gardez-les courts. Plus de détails dans la fiche mega menu Wix Studio.

Mon avis de webdesigner

Le menu hamburger est devenu un réflexe, mais ce n’est pas une raison pour cacher l’essentiel. Sur mobile, gardez un bouton d’action visible à côté du hamburger (appeler, réserver, demander un devis) : c’est souvent lui que le visiteur cherche. Le reste peut attendre dans le menu.

Pour la vue d’ensemble (horizontal, vertical, ancres, dropdowns), lisez la fiche menus Wix Studio. Et pour un site pensé mobile dès le départ, découvrez mon offre de webdesigner freelance.

Questions fréquentes sur le menu hamburger Wix

Pourquoi l’appelle-t-on menu hamburger ?

Parce que ses trois traits horizontaux rappellent un hamburger vu de profil : le pain, la viande, le pain.

Peut-on utiliser un menu hamburger sur ordinateur ?

Oui. Vous pouvez choisir le type Hamburger sur tous les points de rupture, par exemple pour un site très épuré. Vérifiez simplement que vos visiteurs trouvent le menu du premier coup.

Le menu hamburger est-il mauvais pour le SEO ?

C’est avant tout un choix de design. Pour le référencement, l’important est d’avoir des liens internes clairs dans le contenu de vos pages, pas seulement dans le menu.

À propos de l’auteur Alexandre Cottret, webdesigner freelance et fondateur de Trend Design, certifié Wix Partner Legend et Wix Studio. Plus de 150 sites créés depuis 2021, 5/5 sur Malt (93 avis).

Sources : Aide Wix, Studio Editor : Using Hamburger Menus et Aide Wix, Studio Editor : Adjusting the Layout of New Menus