A good user flow contributes enormously to a successful website. The content, positioning and appearance of your menu/navigation should therefore be well thought out. Here you can find some inspiration and examples for your own CSS menu!
Partially in this list are “normal” CSS menus, for a very simple reason: the usability comes first and only then the appearance. Normal menu bars can also look very chic. With the right effects and animations they become a real eye-catcher.
The pens shown are licensed with MIT. You can find more info about your own use on the Codepen Blog.
See the Pen
Nav Menu Hover by Hans Engebretsen (@hans)
on CodePen.
Coded with
HTML, CSS (SCSS)
See the Pen
Sticky Navigation Menu With Smooth Scrolling by Praveen Bisht (@prvnbist)
on CodePen.
Coded with
HTML (Pug), CSS (SCSS), JS (jQuery)
See the Pen
Pure CSS DropDown Menu by Andor Nagy (@andornagy)
on CodePen.
See the Pen
Accessibility menu by Lee Kiernan (@leekiernan)
on CodePen.
Coded with
HTML, CSS (SCSS), JS (jQuery)
See the Pen
CSS Menu hover effects by Sarath AR (@sarath-ar)
on CodePen.
See the Pen
Nav/Menu Button by Graham Pyne (@gpyne)
on CodePen.
See the Pen
Snap.svg Menu animation by romagny jerome (@romagny13)
on CodePen.
Coded with
HTML, CSS (SCSS), JS (Snap.svg)
#8 Standard Nav Bar
See the Pen
Nav Bar by Justin (@nilbog)
on CodePen.
Coded with
HTML, CSS (SCSS), JS (jQuery)
See the Pen
menu by mp_graphic (@mp_graphic)
on CodePen.
Coded with
HTML, CSS, JS (jQuery)
See the Pen
CSS menu transitions by Khaos (@Khaosmuhaha)
on CodePen.
See the Pen
Vertical Navigation Menu by Madalin Tudose (@madalintudose)
on CodePen.
Coded with
HTML, CSS, JS (jQuery)
#12 Portfolio Icon Nav
See the Pen
Portfolio by Ridho Ahmad Batubara (@beteer)
on CodePen.
Coded with
HTML, CSS, JS (jQuery)
#13 Responsive navigation multilevel
See the Pen
Responsive navigation multilevel by Stéphanie Walter (@stephaniewalter)
on CodePen.
Coded with
HTML, CSS (Less), JS (jQuery)
See the Pen
Nav Menu Design by Abdullah Al Amin (@billionbd)
on CodePen.
#15 Full page drop down – GSAP
See the Pen
Full page drop down – GSAP by Rath (@rp20)
on CodePen.
Coded with
HTML, CSS, JS (jQuery, TweenMax.js)
See the Pen
Lavalamp CSS Menu by Patak (@Patak)
on CodePen.
#17 Circle Nav
See the Pen
Circle Nav by Corey Roth (@coreyroth)
on CodePen.
Coded with
HTML, CSS (SCSS), JS (jQuery)
See the Pen
Magic Line Menu by Collin Smith (@collincodes)
on CodePen.
Coded with
HTML (Pug), CSS (Stylus), JS (jQuery)
See the Pen
Sliding Menu by Florian-Gropp (@florian-gropp)
on CodePen.
See the Pen
circle menu by Pierre (@Piewe)
on CodePen.
#21 Pure CSS One page vertical navigation
See the Pen
Pure CSS One page vertical navigation by Hrtzt (@hrtzt)
on CodePen.
Coded with
HTML (Pug), CSS (Sass), JS
See the Pen
CSS Menu Concept (Clip-path) by Charlie Marcotte (@FUGU22)
on CodePen.
Coded with
HTML (Pug), CSS (Sass), JS
See the Pen
💪 CSS menu feat. emoji by Piotr Galor (@pgalor)
on CodePen.
See the Pen
Pure CSS Menu Navigation by Izzy Skye (@chrysokitty)
on CodePen.
See the Pen
Pure CSS Menu by Karim Khan (@icodefx)
on CodePen.
Did you code your own fancy menu, which should appear in this list? Let me know in the comments below.
Is a “normal” desktop CSS menu not the right thing after all? Perhaps a CSS hamburger menu would be better?
Note: All buttons are all published on codepen.io and not by me.
Not enough? Then this could be something for you:
Thanks, they are so fascinating especially circle shape menus.
awesome
Have the same problem but i m a complete noob. I use the max mega menu and it has a function z=999 and in the comment is says that it has to be 999 so it is always on top. Could this help?
Awesome
These are freaking awesome! Keep it up. Love seeing different things like this that I can get ideas from for webpages.
Thank you!
Thank you!