Home » Best Practise Beispiele für Menu Navigation auf Webseiten

Best Practise Beispiele für Menu Navigation auf Webseiten


Das Navigationsmenü ist auf Webseiten essentiell, um an die richtige Unterseite zu gelangen. Gerade auf mobilen Endgeräten haben sich Hamburger-Menüs im Header durchgesetzt. Es gibt viele Design-Varianten und Unterschiede in der Handhabung. Wir haben einige Best Practise Beispiele für mobile Navigations-Menüs auf Webseiten zusammengestellt und stellen sie in diesem Beitrag vor.

https://www.aarp.org

https://www.aarp.org/

Die Webseite der American Association of Retired Persons nutzt ein simples Off-Canvas Menu im Header, das von links eingefolgen kommt. Die Elemente mit ausreichend White-Space angeordnet und die wichtigsten Elemente sind am oberen Rand aufgeführt. Eine gute Umsetzung des Off-Canvas-Konzepts.

https://m01n.com/

m01n Digitalagentur

Das zweite Beispiel ist die Webseite der m01n Digitalagentur. Insgesamt ist das Webdesign sehr stimmig aufgebaut, was sich im mobilen Navigationsmenü wiederspiegelt.

Besonders gut gefällt uns, die Konzentration auf das Wesentliche und die großen Navigationspunkte, die es gerade auf mobilen Endgeräten einfach macht ans Ziel zu gelangen. Getreu dem Motto Keep it simple eine gelungene Navigationsmenü-Struktur für eine Digitalagentur.

https://www.niarratravel.com/asia/

Niarra Travel Website
Niarra Travel Website zweite Navigationsebene

Im nächsten Beispiel die Webseite eines Reiseanbieters. Der Clou an der aufgeräumten Navigation ist, dass die zweite Menü Ebene bebildert ist.

Beim ersten Klick auf die Navigation erscheinen 4 Menüpunkte, sodass alles sehr übersichtlich und aufgeräumt wird. Im Untermenü werden dann Bilder als Menüpunkte verwendet, was sehr stimmig wirkt.

Das waren ein paar Best Practise Beispiele für Webseiten-Menüs hauptsächlich für mobile Endgeräte, die uns sehr gut gefallen haben.

Webdesign entwickelt sich ständig weiter und wir sind uns sicher, dass die mobilen Menüs immer ausgefeilter werden. Aber ein Punkte ist gerade auf Mobilgeräten entscheidend: Weniger ist mehr. Eine vollgepackte Navigation hilft keinem Nutzer.

Sie haben auch inspirierende Beispiele für Off-Canvas & Co mobile Menüs, dann gern in den Kommentaren erwähnen! Warum gefällt Ihnen gerade dieses oder jene mobile Menü! Wir freuen uns auf Ihre Kommentare.

Weiterführende Gedanken / #SelbstMemos:

  • Prebuild Headers for WordPress Elementor
  • Off-Canvas Menü für WordPress
  • Fullscreen Menü WordPress

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.