130+ Beautiful CSS Menus (Free Code + Demos)

A responsive and easy to customise mega-dropdown component.

A tutorial on how to create a circular navigation using CSS transforms.

Filling the text with a different color on hover - a creative text effect. View this pen on full screen mode and enjoy this creative pen

A randomly generated blobby nav created with CSS. Has smooth anchor scrolling, uses backdrop-filter, and SVG filter. Also, has a pure CSS "off" click by resizing a label Enjoy!

Quick code mock-up for the Full-Page Navigation CodePen Challenge

Smooth drop down menu

Made a strange navigation. CSS only. Let's Click! The smartphone screen is being adjusted.

Off Canvas Menu Pure CSS by using only CSS.

Menu with dropdown made only in css, with a line that follow the hover on the line

Using border-radius and clipping paths to create a circular fan like menu Icons by Scott Dunlap

Navbar Interaction.

Simple vertical dark menu with css and icons

Using clip-path times two to make an irregular shaped object fill out a cut-out shape in an unfold open menu effect.

Circular menu with toggle button created only with css. You can configure the menu size, number of items, color of toggle button and links icons.

A simple yet beautiful folding menu made in CSS.

Fun navigation effect using CSS Keyframes. A quick jump back to the old school. Take a look and let me know what you think 👍🏼

I've always been fascinated by navbars that would have a line following your cursor while you hovered a link, so I decided to finally try my hand at making one with just CSS.

Design Inspired from Oleg Frolov.

Pure CSS Floating menu animation Inspired by https://www.uplabs.com/posts/options-floating-interaction design

Updated with ARIA roles and accessibility. Based off of a piece of code I did for @jzl's portfolio navigation at http://jeselleobina.com/portfolio. Stay tuned for a full tutorial on Tuts+!

Chrome and Firefox good... IE bad, no transition support for flex property.

One current trend in navigation styles that you may have seen is the full screen navigation overlay. With this type of navigation, toggling the navigation will overlay the menu across the entire screen. Codrops did a really nice set of demos with full screen overlay styles last year. I wan...

Read More

Mobile navigation open and close animations using GSAP TweenMax and TimelineMax. Still needs some transition tweaking...

This is just another dropdown menu concept.

Includes a burger with pure CSS animations, fadeIn animations from animate.css, minimal JS

Uses SVG path manipulation based on mouse position to 'chase' the user's position

Design is based on https://dribbble.com/shots/2267219-UI-Navigation-Concept that used jQuery, CSS and HTML.

practicing some Sass mixin techniques for creating cleaner code. based on this video -> http://www.creativebloq.com/web-design/how-write-cleaner-css-and-smarter-sass-41514637

Wanted to explore a nice navigation menu for mobile, pretty stoked with the results

CSS Hamburger Animation taken from http://codepen.io/designcouch/details/Atyop/

Menu with dropdown made only in css, with a line that follow the hover on the line

The cool gooey effect applied to a mobilestyle menu. Jquery and CSS Transitions for the animations.

A flat horizontal navigation that uses jQuery for a clean dropdown menu alongside with animate.css for the nice flip at the beginning.

A fairly accessible fullscreen overlay menu built with jQuery and CSS. The second entry of the A to J navigation collection. Let's play!

An example of how to build a full page navigation that exists off of the screen canvas, sliding into view when clicking the menu option. Added spice with a changing background color depending on navigation item hover.

Crafted and debugged in 5 minutes, IE10+ compatible. Might not be ideal for production but would help you if you need a quick working responsive and modern menu.

Just a simple html and css dropdown menu...

Simple, sleek looking dropdown menu effect achieved using pure CSS. Simple functionality, method can be extended to create a secondary dropdown block with few edits.

Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.

This is a simple dropdown menu made using unsorted lists and CSS3 transitions.

Another off canvas menu using the checkbox hack to active mobile navigation

You have probably all seen the "drawer menu/off-canvas" navigation style made popular by Facebook a few years back. There are a lot of great javascript plugins that offers this functionality, but I thought it would be cool to try and do this with the new cool features of css. No javascript...

Read More

Full circular animated navigation in CSS. Perfect for mobile. Based on codrops's circular navigation

This is a CSS-only slide menu.

I saw Andy Thelander make a sweet circular links menu so I made a circular links menu. It's not as cool but whatevs. All javascript cause I'm lazy for markup. You can check out the original inspiration at http://thlndr.com

Learn to make a simple off canvas mobile navigation with delayed link animation. The links have a simple transition effect of fading in from right to left when the navigation is toggled. But the animation occurs in a chained way where the links animate one after the other. This is done by...

Read More

Menu animation based on the work of CreativeDash. http://dribbble.com/shots/1239862-iPad-Mini-Showcase-Template

I saw a gif of this style menu on Scout's page on Dribbble and decided to take a shot at it, I thought it was pretty cool to add some subtle animation to the active menu and I also wanted to use flexbox a bit to help lay this out.

Responsive mega menu with blog,Image and drop down.Enjoy it....

There is a bug with square backgrounds when you hovering buttons. Looks like it's a problem with this fancy hsla gradient background, but i don't wanna change it :)

Accordion menu

Filter Menu created by Anton Aheichanka that has been converted into web version. Here is the original link of https://dribbble.com/shots/1956586-Filter-Menu

Nothing too fancy here, as always I like things clean and simple. Featuring the infamous burger menu, some sliding panels and subtle hover animation. This was supposed to be the main nav for my redesigned portfolio, but I ditched it in favor of regular navigation, the "say no to burger"...

Read More

Simple, basic and elegant CSS3 and jQuery driven fullscreen menu.

Gooey menu with CSS and SVG filters. Version 1

Off canvas navigation menu is hidden by default. When you click on it, some sh*t happens.

CSS Hamburger Animation taken from http://codepen.io/designcouch/details/Atyop/

Creative menu made with html sass/css3 and JQuery.

This is based on my previous pen where I used a tutorial from CodyHouse. Also credits go to Tamino Martinius for showing how to make the toggle icon using SVG.

When you hover the colourful navigation the dot follows your moves to the current item. When you leave it goes back to the active item.

If the animation was removed this would be a very simple mobile navigation that I use regularly, but everyone loves animation on CodePen!

A, rather explosive, menu is just a click away. All you have to do is say fire.

Problem with long drop down menus? Well, try this simple solution with the use of javascript and jQuery.

A full-screen menu, showcasing your brand and website navigation. Built using SCSS and vanilla JS.

Idea and inspiration: https://dribbble.com/shots/1719325-GIF-Sticker-App Developed in Chrome, not tested elsewhere, not production ready. Known issue: content overflow is cut when rotated. Tried different pure-CSS solutions and none worked for me. Will give credit for a non-JS solution. ...

Read More

Little off canvas animated menu

A simple flat vertical navigation with multi animated drop down menu. Also including Font Awesome and Animate.css

The page slides to reveal a clean, simple navigation

A simple Flat Vertical Navigation with a simple dropdown menu.

Accordion menu

A responsive fixed menu that's always right there.

Hello everyone, Do you have questions how to create a Responsive Navigation Menu using only CSS?? Here's an example of responsive navigation menu using only CSS. I have used HTML 5 tag in this code. This is complete code without a single line of JavaScript code.

Responsive mobile menu with css only

I have questions about the usability of something like this, but it is a handy way to create a slide out drawer without javascript.

Live at https://jubishop.com/resume.html

Simple active menu in html and css

Dropdowns can be sometimes difficult on smaller screens. This menu is just a small experiment. It demostrates, what can be done with Bootstrap dropdown component with just a few lines of code.

Only CSS and Responsive Hamburguer Menu This is a responsive hamburguer menu that doesn't use JavaScript

// a pure html and css megamenu just hover on collection and enjoy custom mega menu // Developed By Umar Mughal