35 CSS Menus (+ Animations)

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!

Some of the items on this list are “normal” CSS menus for a very simple reason: usability comes first, followed by appearance. Even standard menu bars can look very stylish. With the right effects and animations, they become real eye-catchers.

If you like one of the CSS menus, simply click on “Get code” to receive the full code of the CSS menu. These examples showcase the versatility and adaptability of CSS menus, which can be beneficial in any web project. Create and customize your own CSS menu to enhance both the usability and design of your website.

The pens shown are licensed with MIT. You can find more info about your own use on the Codepen Blog.

#1 Cool Nav Menu Hover

See the Pen Nav Menu Hover by Hans Engebretsen (@hans) on CodePen.

#2 Sticky Navigation Menu with Smooth Scrolling

See the Pen Sticky Navigation Menu With Smooth Scrolling by Praveen Bisht (@prvnbist) on CodePen.

#3 Pure CSS DropDown Menu

See the Pen Pure CSS DropDown Menu by Andor Nagy (@andornagy) on CodePen.

#4 Accessibility menu

See the Pen Accessibility menu by Lee Kiernan (@leekiernan) on CodePen.

#5 CSS Menu hover effects

See the Pen CSS Menu hover effects by Sarath AR (@sarath-ar) on CodePen.

Are you looking for a CSS hamburger menu?

#6 Icon Menu

See the Pen Nav/Menu Button by Graham Pyne (@gpyne) on CodePen.

#7 Snap.svg Menu animation

See the Pen Snap.svg Menu animation by romagny jerome (@romagny13) on CodePen.

#8 Standard Nav Bar

See the Pen Nav Bar by Justin (@nilbog) on CodePen.

#9 Half-page Menu

See the Pen menu by mp_graphic (@mp_graphic) on CodePen.

#10 CSS menu transitions

See the Pen CSS menu transitions by Khaos (@Khaosmuhaha) on CodePen.

#11 Vertical Navigation Menu

See the Pen Vertical Navigation Menu by Madalin Tudose (@madalintudose) on CodePen.

#12 Portfolio Icon Nav

See the Pen Portfolio by Ridho Ahmad Batubara (@beteer) on CodePen.

#13 Responsive navigation multilevel

See the Pen Responsive navigation multilevel by Stéphanie Walter (@stephaniewalter) on CodePen.

#14 Nav Menu Design

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.

#16 Lavalamp CSS Menu

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.

#18 Magic Line Menu

See the Pen Magic Line Menu by Collin Smith (@collincodes) on CodePen.

#19 Sliding Menu

See the Pen Sliding Menu by Florian-Gropp (@florian-gropp) on CodePen.

#20 Another Circle Menu

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.

#22 CSS Menu Concept (Clip-path)

See the Pen CSS Menu Concept (Clip-path) by Charlie Marcotte (@FUGU22) on CodePen.

#23 CSS menu feat. emoji

See the Pen 💪 CSS menu feat. emoji by Piotr Galor (@pgalor) on CodePen.

#24 Pure CSS Menu Navigation

See the Pen Pure CSS Menu Navigation by Izzy Skye (@chrysokitty) on CodePen.

#25 Pure CSS Menu

See the Pen Pure CSS Menu by Karim Khan (@icodefx) on CodePen.

#26 Navigation Menu Indicator

See the Pen Navigation Menu Indicator by Julius Caesar (@-ljf) on CodePen.

#27 CSS Menu

See the Pen Untitled by MOHAMMAD FAKKOS (@MOHAMMAD-FAKKOS-the-typescripter) on CodePen.

#28 Magic Navigation Menu Effect

See the Pen Magic Navigation Menu Effect by W3Developer (@w3developeryt) on CodePen.

#29 CSS Menu

See the Pen Untitled by Talagasari the explore (@Talagasari-the-explore) on CodePen.

#30 CSS Menu

See the Pen Untitled by Earth Buddy (@Earth-Buddy) on CodePen.

#31 Flexbox dropdown navigation menu

See the Pen Flexbox dropdown navigation menu by lawnch (@lawnch) on CodePen.

#32 CSS Menu

See the Pen Untitled by Timothy Raines (@Timothy-Raines-the-looper) on CodePen.

#33 Animated Navigation Menu Component – React

See the Pen Animated Navigation Menu Component – React by Jorge Asuaje (@bigapplemonkey) on CodePen.

#34 Touch device jelly menu concept

See the Pen Touch device jelly menu concept by LegoMushroom (@sol0mka) on CodePen.

#35 Angled Menu

See the Pen Angled Menu by Keith Light (@keefyboooo) on CodePen.

Did you code your own fancy menu, which should appear in this list? Let me know in the comments below.

Note: All buttons are all published on codepen.io and not by me.

Not enough? Then this could be something for you: