40 CSS Menus

free CSS menus

Stuck at creating a website navigation menu? Download over 40 free CSS menus. Modern menus with unique animation effects to pure CSS menus for website performance.

To speed up your menu design on any website you create we have handpicked free CSS templates that are easy to install. The navigation plugins are essential for building a mega menu for large websites or a side menu for eCommerce websites with lots of categories. With this unique set of plugins and code snippets, developing navigation will be pretty much more straightforward. The responsive design and cross-browser support given by most of these jQuery plugins will help you create website menus with confidence.

Sometimes a minimal menu design is preferable for many occasions. So keep checking our list of CSS menus that will help you do that. Start digging.

Horizontal Menu

This website element is always a requirement for web designers and developers. Here you get plugins as well as example designs. Sometimes client requirements might need a bit of tweaking, which can only be achieved by a menu plugin rather than a standalone menu design. Therefore I’ve compiled a list of solid jQuery menu plugins, tab menu for modern mobiles, responsive and simple horizontal menus, and scrollable navigation.

Pure CSS Navigation Effects

Coding: HTML/CSSResponsive: No

Dependencies: NoneSkill Required: Beginner

This is a set of horizontal navigation menus designed with unique hover effect animations just for your modern website. These are very easy to implement on Bootstrap websites or custom CSS websites. You must have an active account on Codepen to download Html & CSS files.

Demo & Download

Simple Menu CSS Effects

Coding: HTML/CSSResponsive: No

Dependencies: NoneSkill Required: Beginner

pure css menu effects

This is a pure CSS navigation menu with horizontal menu designs that use no JavaScript for their menu design. The four menu examples include the Button effect, Strikethrough effect, Hover line & Slide down effects. It is easy to implement on any website by copying the HTML & CSS code.

Direct Download

Horizontal Scrollable Navigation

Coding: HTML/CSSResponsive: Yes

Dependencies: NoneSkill Required: Beginner

scrollable menu

Most modern websites have started to use scrollable navigation menus instead of a hamburger menu. It sure seems to improve user experience by letting visitors access website categories quickly. This is a pure CSS design and has no jQuery code.

Demo & Download

Horizontal Tab Menu

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Intermediate

40 CSS Menus 1

If you are looking for the right tab menu for your website navigation, get this free template. You must have a free account on Codepen to download the source code.

Demo & Download

Horizontal Icon Navigation

Coding: HTML/CSSResponsive: Yes

Dependencies: NoneSkill Required: Beginner

icon navigation for mobile menu

Mobile websites, including progressive web apps, are having huge demands with clients these days. The demand for mobile websites and progressive web apps is on the rise. Clients who need eCommerce websites prefer better visual design along with an impressive user experience. Tab navigation is a crucial UI design for simplifying massive link lists, categories, menus, etc. Here you will find a sleek menu design using SVG icons that you can download for free.

Demo & Download

Mobile Navigation Tab CSS

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Beginner

40 CSS Menus 2

Here is a tabbed navigation menu that looks great with fluid animations. Recently many mobile websites and mobile apps tend to use a tab menu rather than a hamburger menu. This menu is free to use and will work great as a footer menu for your device.

Demo & Download

SlimMenu

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuery, ModernizrSkill Required: Intermediate

40 CSS Menus 3

slimMenu is a powerful jQuery plugin that lets you create responsive and multi-level navigation menus fast. The plugin is easy to implement on any website, either it’s Bootstrap or standard CSS websites. Unlike standalone menu examples in the list, this plugin offers many options to handle the structure and animations of your menu from the jQuery code. For instance, “resizeWidth” lets you control navigation collapse and “animSpeed” to control an animation’s transition speed.

Demo & Download

Navigation Sticky

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Beginner

css js sticky navigation

This is a lightweight yet powerful jQuery code snippet that does two things:

  1. It adds sticky class to your “nav” tag; it also lets you modify jQuery to change scrolling height
  2. It adds a smooth scroll animation effect; also enables you to modify the scrolling speed.

Demo & Download

Cool Navigation

Coding: HTML/CSS/JSResponsive: No

Dependencies: jQuerySkill Required: Beginner

Like extremely cool navigation? This one looks like a menu in the game. I already love the animation, and it will look great on websites game, and personal websites.

Demo & Download

Vertical Menu

Zeynepjs – Multi-level Menu plugin

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Intermediate

40 CSS Menus 4

This is a lightweight multi-level menu plugin that lets you create brilliant vertical side menus for your website. The CSS design and the animations are neat and clean. A must-have plugin for front-end developers who build eCommerce websites that need sidebar menus with scrollable menu items.

Demo & Download

Vertical Layout with Navigation

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuery, Font AwesomeSkill Required: Intermediate

This is more than a small snippet. Here is a full screen website slider that runs with a vertical navigation bar. The design is suitable for creating a beautiful website for portfolios or personal profiles. It is mobile-ready and works on any device. The fluid animated style makes this template worth a try for your new website.

Demo & Download

Pure CSS Side navigation menu V2

Coding: HTML/CSSResponsive: Yes

Dependencies: None,Skill Required: Beginner

Side navigation menu css

Using just simple html code, SVG icons, and CSS code, you get a beautiful sidebar navigation menu. It animates when you hover to the left side of the website.

Vertical icon navigation (slide-out menu)

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuery, Font AwesomeSkill Required: Intermediate

40 CSS Menus 5

Today I present you with another vertical navigation with flat colors, Font Awesome icons, and an off-canvas push menu. The CSS animations and responsive design are top-notch.

Demo & Download

Greensock Menu effects

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuery, Line Icons, MorphSVG, GreenSockSkill Required: Intermediate

This is a great menu concept project which is done using the GreenSock JavaScript libraries. The animation is smooth and you may use this for menu design inspiration.

Demo & Download

Mega Menu

One of the most powerful elements of a website that never gets old. The mega menu works for eCommerce, gaming, business websites, and any website with a large number of categories. The tricky side is to get the responsive design working(get 2 in One Mega menu). Here you also get the goodness of all types of menus – dropdown menus, multi-level submenu, and possibly mobile menus for all mobile plus handheld devices.

2 in One – Mega Menu & Off Canvas Menu

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuery, Bootstrap, Font AwesomeSkill Required: Beginner

Yep, you heard that right. This is 2 in 1 menu design where you get two CSS menus.

  1. A responsive Bootstrap mega menu for desktop and retina devices.
  2. The second is a mobile menu that adapts itself to an off-canvas menu design.

All the Html, CSS & JS files are available for free download. The sticky menu class is also added for Ecommerce websites.

Direct Download

Pure CSS – Mega Menu Navigation

Coding: HTML/CSSResponsive: No

Dependencies: BootstrapSkill Required: Beginner

This is a free mega menu for Bootstrap websites as it uses Bootstrap as core CSS. There is no jQuery or JavaScript code needed to run this mega menu. Download and use for any purpose.

Direct Download

Flat Navigation Menu

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuery, ModernizrSkill Required: Intermediate

40 CSS Menus 6

A responsive horizontal dropdown menu inspired by the Microsoft website mega menu can be your next website menu. The menu requires a user click to trigger the multi-level dropdown items. This mega menu has been designed by Codrops in 2013 and still looks fresh in 2021.

Demo & Download

Dropdown Menu

Stretchy Navigation

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuery, ModernizrSkill Required: Intermediate

hamburger menu with dropdown effect

This navigation menu plugin is a CSS dropdown menu from CodyHouse developers. They never cease to impress their audience. The absolute position of this dropdown menu can be changed in the CSS file to any position of the website and the menu reveals with a click/tap. Easy to implement on Bootstrap websites also.

Demo & Download

SlickNav

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuery, ModernizrSkill Required: Intermediate

40 CSS Menus 7

Slicknav is a plugin that is easy to use and provides options to access the jQuery animation library and jQuery UI(optional). It uses a simple markup for a dropdown menu that fits fantastically on any website design. It has cross-browser compatibility and comes with multi-level menu support. The CSS styles are only for mobile devices.

Demo & Download

jQuery Wheel Menu

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Intermediate

40 CSS Menus 8

Demo & Download

This is a menu example that shows a simple popup circle menu on hover. You also get to adjust the layout of the menus to appear.


Hamburger Menu

The hamburger menu is considered to be a brilliant UX design that is still widely used and known by all people who use a mobile application or mobile website. The purpose of the hamburger menu is to create an easy way to navigate to important sections/pages of the website. Sometimes I often feel like many website designers use a hamburger menu for everything. My advice is to only use this menu when navigations like the horizontal tab menu don’t work. Also, check the full screen menu section for more related CSS menus.

Cool Hamburger Menu

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Beginner

40 CSS Menus 9

This is a very simple CSS hamburger menu that shows full screen overlay on a click. This code is beginner-friendly and very easy to implement. The code structure is clean & independent and so is the CSS and jQuery code. You can easily change the width of the full-screen overlay in CSS, adjust the position of the hamburger menu, and so on.

Demo & Download

jQuery pop menu

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Beginner

40 CSS Menus 10

This is a very simple and responsive menu that works on clicking any CSS class or ID you want. The pop menu style is classic but gold. You may write your custom CSS to change the styles.

Demo & Download

Off Canvas Menu

This is a modern menu that sits outside the viewport and is made mainly for mobile and touch devices. Recently we see many websites with a large number of categories using this menu to improve user experience. The widely opted off-canvas menu designs in modern websites are push and fullscreen overlay menus.

Pushy Menu Plugin

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuery, Font AwesomeSkill Required: Beginner

40 CSS Menus 11

Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions. This menu is compatible with mobile browsers – chrome and safari.

Demo & Download

Sidr Plugin

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Intermediate

40 CSS Menus 12

This is the best jQuery plugin for creating off-canvas side menus with responsive design. With tweakable features, this is a must-have for developers.

Demo & Download


Perspective page view navigation

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuery, ModernizrSkill Required: Intermediate

Transforms the page in 3D to reveal the menu. There are many beautiful CSS transitions which can use with this design.

Demo & Download


Full Screen Menu

Last of the category of navigation menu I handpicked here are full screen menus.

Full Screen Navigation Menu

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Beginner

This is a brilliant menu design example which you will love. Try to implement it on your website. It is easy to modify to your needs and adapts to mobile & touch devices.

Direct Download

Full Page Menu

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Beginner

This menu can be triggered on a button, class, hamburger icons, or even text elements. At first glance, you will notice the brilliant CSS animations and transitions built into this menu design. This fullscreen menu lets you add a tab menu inside it.

Demo & Download

jQuery Square Menu

Coding: HTML/CSS/JSResponsive: No

Dependencies: jQuerySkill Required: Intermediate

40 CSS Menus 13

A superb menu design that has clean html code and minimal design style for your website. The animation makes it look like a book and maybe great for personal websites. This is a lightweight JS and CSS snippet that will be easy to implement on your website. You can activate the menu trigger with any ID or Class of an element. The mobile responsiveness is easy to modify as this snippet is just for desktop variants.

Demo & Download

Full-Page Navigation Style 1

Coding: HTML/CSSResponsive: Yes

Dependencies: NoneSkill Required: Beginner

A pure CSS menu with a hamburger icon as the trigger has a very fluid design that uses no Jquery to function. The CSS animations are smooth, and the whole menu design is built with only HTML & CSS.

Demo & Download

Full-Page Navigation Style 2

Coding: HTML/CSSResponsive: Yes

Dependencies: NoneSkill Required: Beginner

This is another variant of fullscreen navigation menu that works flawlessly without jQuery.

Demo & Download


Have you found your favorite navigation menu? Not yet? All CSS menus in this topic are free to download. Just pick one and start building a beautiful navigation menu template for your website and impress your visitors. There are many variants to choose from, and with a little touch of CSS coding on your side, you can customize menus to match your website design.

11 comments
  1. Very interesting,good job and thanks for sharing such a good blog.your article is so convincing that I never stop myself to say something about it.You’re doing a great job.Keep it up

    1. Nice one … but some of your videos not loaded for me …. for example Full-Page Navigation Style 1 … pls check it out ty <3

  2. Most of the designs will just take 10-20 minutes. Some of them are good but they can’t be used in formal site and can be only used in portfolio or sth like that . And for them you should develop on your own. Bring some formal designs too that can be used in formal sites.

  3. i need to menu to slide out and convert to hamburger menu while i scroll down the page

Comments are closed.