A good user flow contributes enormously to a successful website. The content, positioning and appearance should therefore be well thought out. Here you will find some inspirations for your own navigation menu!
➡️ Update with more menus available (click)! 🚀
After the Top 20 CSS Buttons were very well received by you and I got a lot of positive feedback, here is the continuation: Top 20 CSS Navigation Menus!
Sometimes there are "normal" menus in this list, for a very simple reason: Usability comes first and then appearance. Even "normal" menu bars can look very chic. With the right effects and animations they also become a real eye-catcher.
The same applies to mobile representations, also called "hamburgers". Both desktop and mobile menus are available.
All navigation menus are published on codepen.io and are not mine. Therefore the author is always linked. Let's go!
#1 Cool Nav Menu Hover
Author: Hans Engebretsen
#2 The real Hamburger Menu
Author: Gabriela Johnson
#3 Slide Menu
Author: Danny Beton
#4 Accessibility menu
Author: Lee Kiernan
#5 Button Menu Concept
Author: James Truhlar
#6 Icon Menu
Author: Graham Pyne
#7 Snap.svg Menu animation
Author: romagny jerome
#8 Standard Nav Bar
Author: Justin
#9 Half-page Menu
Author: mp_graphic
#10 Standard Menu 2
Author: Selcuk Cura
#11 Nested jQuery Dropdown Menu
Author: Dustin Dowell
#12 Portfolio Icon Nav
Author: Ridho Ahmad Batubara
#13 Fancy Hamburger Menu
Author: Naim Jeem
#14 More fancy Menu (Hover) Styles
Author: Abdullah Al Amin
#15 Another Dropdown Menu
Author: Rath
#16 Scroll and highlight Nav
Author: Jason Waller
#17 Circle Nav
Author: Corey Roth
#18 Burger Animation + Slide In Menu
Author: Valentine
#19 Sliding Menu
Author: Florian-Gropp
#20 Another Circle Menu
Author: Pierre
...
Top comments (17)
I like #2 the real hamburger.
but just like :)
Those really remind me the good old days of Flash 🎄
Flash was great...some years ago 😂
Really enjoyed this post. My fav was #19. Thanks for sharing.
Thanks for your feedback!
Sensational!
It's Really Awsm and Cool..
easy and fun..
Great article with lots of examples. thanks!
but i'm kinda into modern design with svg and cool animations and stuff!
is there any more resources about that kind of navigations?
I don't know any more. Maybe a search for "svg menu" or something like this can help you. Or better: make a request on dev.to or/and twitter 😊
I really like #10, but it's a bit off losing the scroll bar. I might also try matching the menu/close icon and paired text animations match a little better.
I really like #15!
That hamburger one is GREAT but the real gem here is the accessibility menu. Definitively saving for future reference.
Right! It has a much better usability. How I said there are some awesome fancy menus but also useful menus. 😊
Loved every menu :D
Nice work! Share this components on BoxCoding
I am hamburger lover so #2 is the best