159 CSS Menu

About a code

Hamburger

Using clip-path to create a hamburger menu open effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Tilt to Make Room for Menu

An effect similar to the mobile Safari tab experience. Tilt background and fade to make room for a menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Stripe Like CSS Only Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

App Admin Menus

App admin menus. light/dark modes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tailwind.css

About a code

Menu

Menu in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Animated Sidebar Left

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Fullscreen Overlay Navigation Bar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Three Fancy Link Hover Effects

Transitioning clip-path and pseudo-element transforms to create smooth link hovers.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Navigation Dotted Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Fullscreen Overlay Navigation Bar

Fullscreen overlay navigation bar with html & css neon effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

About a code

Context Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Menu Hover Slide Fill

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Dropdown Dark/Light

Pure CSS dropdown dark/light.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: unicons.css

About a code

Pure CSS Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css

About a code

Gooey Dropdown Menu

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Neumorphism Context Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Simple Navigation System

Simple system for navigating a hierarchy in a confined space. Uses standard HTML and CSS, no JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

About a code

Fullscreen Menu Enter

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Context Menu with Feather Icons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: feather-icons.js

About a code

CSS Hamburger Menu

Pure CSS menu interaction. Made using the HTML tags details and summary.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Text Fill on Hover

Filling the text with a different color on hover - a creative text effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

List Item Hower Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Circle Links

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS-Only Marquee Effect

A simple CSS-only marquee effect for a menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS Full-Page Navigation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Pure CSS Single Page Application

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

About a code

Randomly Generated CSS Blobby Nav

A randomly generated blobby nav created with CSS. Has smooth anchor scrolling, uses backdrop-filter, and SVG filter.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Full-Page Navigation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Pure CSS Full Page Nav

Compatible browsers: Chrome, Edge, Firefox (partial), Opera, Safari

Responsive: yes

Dependencies: -

About a code

Full Page Nav

A concept design of full-page navigation, full of typography, and using icons as large images.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Fold Out Mobile Menu

CSS only fold out mobile menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Menu Hover Fill Text

Menu hover fill text (color + background-clip).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Drop Down Menu

Smooth drop down menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Menu with Awesome Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, bootstrap-social.css, font-awesome.css

About a code

CSS Navigation Bar

Implemented a minimal navigation bar that changes color on hovering. Written using only HTML and SCSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Menu Hover Underline

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Apple TV Menu Interface

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS Strange Nav

Made a strange navigation. CSS only. Let's Click!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Navigation with Sub-Navigation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS Navigation

Click the toggle to open the menu and see the magic. This experiment relies on the only CSS to style, animate and position elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Navbar with Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

About a code

Navbar Interaction

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Pure CSS Dropdown Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

The Circular Menu

Using border-radius and clipping paths to create a circular fan like menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Off Canvas Menu Pure CSS

Off canvas menu pure CSS by using only CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Menu Bar CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Vertical Dark Menu with CSS

Simple vertical dark menu with CSS and icons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

About a code

The More Menu

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Off-Canvas Menu

Pure CSS off-canvas menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Moving Underline Nav Menu

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

CSS Folding Menu

A simple yet beautiful folding menu made in CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Fun Hover Navigation

Fun navigation effect using CSS keyframes. A quick jump back to the old school.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Pure CSS Magic Line Navbar

It's pure CSS. All links need to have a consistent dimensions for this to work. You have to set everything up yourself in terms of telling the nav how many items there are and where the .line should move to whenever one of the links gets hovered.

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Circle Menu

nice pure CSS circle menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

About the code

Position Sticky Subnav

Sticky subnavigation in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Drop Down Menu

CSS only drop down menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Navigation Menu

Usable as navigation, menu or effect. It uses CSS transform and perspective to create a unique hololens-like animation effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

3D Navbar

3D navbar in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Just Another Menu

Pure CSS floating menu animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Hamburger Menu

Pure CSS hamburger menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Pure CSS Menu

Pure CSS menu drawer with off-click.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

CSS Menu Feat. Emoji

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

The Menu

Table contents style menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Circle Menu

Pure CSS circle menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

About the code

Perspective Menus

CSS only perspective menus.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Menu Effect

Reverse text color menu effects.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Hover Effect for Horizontal Menu

Pure CSS fading out for siblings menu options on option hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

CSS-Only Nested Dropdown Navigation

CSS only nested dropdown navigation with ARIA.

About the code

Fullscreen Menu Flexbox Style

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

About the code

Dropdown Menu Animation

Nice dropdown menu with animation.

About the code

Mobile Navigation Animation

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

About the code

SVG UI Navigation Concept

Just SVG & CSS3 animations, without any animation libraries.

About the code

Dropdown Menu

Dropdown menu with little jQuery.

About the code

Dropdown

Pretty dropdown menu.

About the code

SVG Gooey Hover Menu Concept

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

About the code

Sidebar Navigation

Sidebar navigation with tooltips.

About a code

Material Design Round Mask Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Fullscreen Navigation

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

About the code

Details Info & Navigation

Navigation with jQuery, CSS and HTML.

About the code

Full Screen Navigation Overlay

An example of a full screen navigation overlay utilizing flexbox.

About the code

Circular Material Menu

Unusual circular menu.

About a code

Animated Menu

Concept for animated social menu. Pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

About the code

Frosty Nav Toggle Effect

HTML, CSS and jQuery frosty navigation toggle effect.

About the code

Gooey Mobile Navigation

The cool gooey effect applied to a mobilestyle menu. jQuery and CSS transitions for the animations.

About the code

Fullscreen Navigation

Fullscreen navigation with HTML, CSS and JS.

About the code

Fullscreen Menu

Simple fullscreen menu.

About the code

Off Canvas Nav

Sass off-canvas navigation.

About the code

CSS Dropdown Menu

Full CSS dropdown navigation. Drops down on click by the use of a hidden checkbox.

About the code

Mobile Menu

HTML, CSS and jQuery effect for mobile menu.

About the code

Accessible Fullscreen Overlay Menu

A fairly accessible fullscreen overlay menu built with jQuery and CSS.

About the code

Quick And Easy Fullscreen Menu

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.

About the code

Full Page Off-Canvas Navigation

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.

About the code

A Simple Dropdown Menu

Just a simple HTML and CSS dropdown menu.

About the code

Flat Horizontal Navigation

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

About the code

Fullscreen Menu

Fullscreen hamburger menu.

About the code

Off-Canvas Menu Effects

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

About the code

Radial Menu

Animated radial menu.

About the code

Pure CSS Transition Effects For Off-Canvas Views

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 required. - Thomas Wilthil

About the code

CSS Off Canvas Menu

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

About the code

Dropdown Menu

The hover menu is pure CSS. The toggle menu utilizes a minimal amount of JavaScript, but will degrade gracefully because it only uses JavaScript to close the menu when the user clicks outside of the menu.

About the code

Circular Navigation Popout

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

About the code

Touch Device Jelly Menu Concept

Touch device jelly menu concept with HTML, CSS and JavaScript.

About the code

Circular Links Menu

Responsive circular links menu.

About the code

Horizontal Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

About the code

Bounce Mobile Menu

Menu animation with HTML, CSS and jQuery.

About the code

Circular Navigation With CSS

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

About the code

Dropdown Menu

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

About the code

Off Canvas Menu with Animated Links

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 adding a transition-delay to every link.

About the code

Mega Dropdown

A responsive and easy to customise mega-dropdown component.

About the code

Responsive Mega Menu

Responsive mega menu for mobile view.

About the code

Responsive Mega Menu

Responsive mega menu with flexbox.

About the code

Sexy Flexy Mega Menu

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. - Mike Torosian

About the code

Responsive Mega Menu

Responsive mega menu with blog, images and drop down.

About the code

Mega Menu Dropdowns with Foundation 5

A mega menu (a big, 2-dimensional drop-down panel) groups navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users’ choices.