Collection of free vanilla JavaScript navigation menu code examples: responsive, animated, dropdown, sticky and full page. Update of April 2020 collection. 35 new items.

Related Articles

  1. Bootstrap Menus
  2. CSS Menus
  3. jQuery Menus
  4. React Menus
  5. Tailwind Menus

Author

  • Anders Grimsrud

Made with

  • HTML / CSS / JS

About a code

Progress Nav Concept Using the Intersection Observer API

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

Responsive: yes

Dependencies: -

Author

  • Adir

Made with

  • HTML / CSS / JS

About a code

Vector/ Project Selection

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

Responsive: yes

Dependencies: -

Author

  • Brad Traversy

Made with

  • HTML / CSS / JS

About a code

Travel Video Landing Page

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

Responsive: yes

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Twitter Sidebar

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

Responsive: no

Dependencies: gsap.js

Author

  • designcourse

Made with

  • HTML / CSS (SCSS) / JS

About a code

Slide-out Navigation with GSAP 3

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • Yuki

Made with

  • HTML / CSS (SCSS) / JS

About a code

Button Hover Effect

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

Responsive: yes

Dependencies: -

Author

  • Kevin Batdorf

Made with

  • HTML / CSS / JS

About a code

Endless Wheel Navigation Built With AlpineJS and TailwindCSS

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

Responsive: yes

Dependencies: tailwind.css, alpine.js

Author

  • Mary Lou

Made with

  • HTML / CSS / JS

About a code

Menu to Inner Page Animation with Image Grid Background

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

Responsive: yes

Dependencies: -

Author

  • Yash Vadhadiya

Made with

  • HTML / CSS / JS

About a code

Full Screen Navigation Bar

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

Responsive: yes

Dependencies: -

Author

  • UWANG20

Made with

  • HTML / CSS / JS

About a code

Menu Navigation Animation

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

Responsive: yes

Dependencies: gsap.js

Author

  • Zarko Rvovic

Made with

  • HTML / CSS (SCSS) / JS

About a code

Travel/Tracking Website Landing Page

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

Responsive: yes

Dependencies: -

Author

  • Melinda Kyzar

Made with

  • HTML / CSS / JS

About a code

Context Menu

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

Responsive: yes

Dependencies: -

Author

  • Natalia Davydova

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Fancy Navigation

Fancy navigation with hover effects.

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

Responsive: yes

Dependencies: -

Author

  • @keyframers

Made with

  • HTML / CSS (SCSS) / JS

About a code

Image Hover Navigation

Intro animation duration stagger. Mouse position tracking with CSS variables. Text outline reveal on hover.

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

Responsive: yes

Dependencies: -

Author

  • Coding Beast

Made with

  • HTML / CSS (SCSS) / JS

About a code

The 3D Navigation Animation

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

Responsive: yes

Dependencies: -

Author

  • Craig Roblewsky

Made with

  • HTML / CSS / JS

About a code

Jumping Gooey Navigation

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

Responsive: yes

Dependencies: gsap.js

Author

  • Nahid

Made with

  • HTML / CSS / JS

About a code

Full Screen Overlay Navigation

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

Responsive: yes

Dependencies: -

Author

  • Craig Roblewsky

Made with

  • HTML / CSS / JS

About a code

Nav Stretch

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

Responsive: yes

Dependencies: gsap.js

Author

  • Ryan Mulligan

Made with

  • HTML / CSS (SCSS) / JS

About a code

Bold Hover Animations with Splitting.js

Added Splitting.js to incorporate other silly animation ideas on hover.

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

Responsive: yes

Dependencies: splitting.css, splitting.js

Author

  • Sikriti Dakua

Made with

  • HTML / CSS (SCSS) / JS

About a code

Link Hover Interaction

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

Responsive: yes

Dependencies: splitting.js

Author

  • Sikriti Dakua

Made with

  • HTML / CSS (SCSS) / JS

About a code

Menu Hover Interaction

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

Responsive: yes

Dependencies: locomotive-scroll.css, imagesloaded.js, locomotive-scroll.js, gsap.js

Author

  • Mary Lou

Made with

  • HTML / CSS / JS

About a code

Menu Image Animation on Hover

A hover effect for a menu where images appear with an animation on each item.

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

Responsive: yes

Dependencies: -

Author

  • CurleyWebDev

Made with

  • HTML / CSS / JS

About a code

Grid Navigation

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

Responsive: yes

Dependencies: gsap.js

Author

  • Matěj Husák

Made with

  • HTML / CSS / JS

About a code

The Context Menu

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

Responsive: yes

Dependencies: -

Author

  • Mary Lou

Made with

  • HTML / CSS / JS

About a code

An Infinitely Scrollable Vertical Menu

A quick look at how an infinitely scrollable menu works based on a looping scroll illusion of cloned items.

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

Responsive: yes

Dependencies: -

Author

  • Florin Pop

Made with

  • HTML / CSS / JS

About a code

Responsive Navigation with Animations

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • Joseph Mawa

Made with

  • HTML / CSS / JS

About a code

Expandable Menu

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

Responsive: yes

Dependencies: -

Author

  • alphardex

Made with

  • HTML / CSS / JS (TypeScript)

About a code

Header Underline

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

Responsive: no

Dependencies: -

Author

  • alphardex

Made with

  • HTML / CSS (SCSS) / JS (TypeScript)

About a code

Staggered Blink Text Menu

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

Responsive: no

Dependencies: -

Author

  • Gabriele Corti

Made with

  • HTML / CSS / JS

About a code

SVG Navigation

Tinker with SVG syntax, the textPath element and the startOffset attribute to create an intriguing navigation. Animated with anime.js.

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

Responsive: yes

Dependencies: anime.js

Author

  • Kiarash Zarinmehr

Made with

  • HTML / CSS / JS

About a code

Paper Pieces Navigation Menu

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

Responsive: yes

Dependencies: gsap.js

Author

  • Sikriti Dakua

Made with

  • HTML / CSS (SCSS) / JS

About a code

Full Page Navigation

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

Responsive: no

Dependencies: gsap.js

Author

  • Yannick Brandt

Made with

  • HTML / CSS / JS

About a code

Window Shade Navigation

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

Responsive: yes

Dependencies: -

Author

  • Jon Kantner

Made with

  • HTML / CSS / JS

About a code

Full-Page Nav Stacking Animation

A nav menu concept in which the three bars fill up the screen. This happens in a way that looks like blocks being stacked. When collapsing the menu, the sequence is reversed.

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

Responsive: yes

Dependencies: -

Author

  • Lennart Hase

Made with

  • HTML / CSS (SCSS) / JS

About a code

Full-Page Navigation

Created full-page navigation using anime.js and some SVGs.

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

Responsive: no

Dependencies: anime.js

Author

  • Niels Voogt

Made with

  • HTML / CSS (SCSS) / JS

About a code

Flip Navigation

A bit laggy on initial flip though...

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

Responsive: no

Dependencies: -

Author

  • Bramus

Made with

  • HTML / CSS / JS

About a code

Sticky ScrollSpy Navigation

Smooth scrolling sticky scrollspy navigation.

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

Responsive: no

Dependencies: -

Author

  • Oluwadare Seyi

Made with

  • HTML / CSS (SCSS) / JS

About a code

CSS Nav Animation

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Chris Weissenberger

Made with

  • HTML / CSS (SCSS) / JS

About a code

Header Nav Overflow Into Mobile Nav

The idea behind this header nav is to move items that no longer fit into a navigation drawer/mobile nav. The trick behind it is to give the header a set height and allow the header nav items to wrap, but hide the overflow. Then use JavaScript to check for any items that have wrapped and reveal them in the drawer/mobile nav.

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

Responsive: yes

Dependencies: resizeobserver.js

Author

  • Alex

Made with

  • HTML / CSS / JS

About a code

Nav Menu with Circular Reveal Animation

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

Responsive: no

Dependencies: -

Author

  • Mohammadreza Ziadzadeh

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Menu Interaction

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

Responsive: no

Dependencies: -

Author

  • Hussard

Made with

  • HTML / CSS / JS

About a code

Navigation & Sub-navigation

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

Responsive: yes

Dependencies: anime.js

Author

  • Mark Root-Wiley

Made with

  • HTML / CSS (SCSS) / JS

About a code

Clicky Menus

Clicky menus: accessible and progressively enhanced menu with clicky dropdowns.

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

Responsive: yes

Dependencies: -

Author

  • Mary Lou

Made with

  • HTML / CSS / JS

About a code

Draggable Menu with Image Grid Previews

A draggable inline menu with a scattered thumbnail preview of an image grid.

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

Responsive: yes

Dependencies: imagesloaded.js, charming.js, tweenmax.js, draggabilly.js

Author

  • Francesca Vago

Made with

  • HTML / CSS / JS

About the code

Interactive Radial Menu

Interactive radial menu in HTML, CSS and JS.

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • Ibn Al-Khwarizmi

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About the code

Creative Hamburger Menu

Hamburger menu using the new clip-path CSS property.

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

Responsive: yes

Dependencies: -

Author

  • Andrej Sharapov

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About the code

Nice Effect For Navigation

Excellent hover and click effect for navigation bar or other.

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

Responsive: no

Dependencies: -

Author

  • Julio Soto

Made with

  • HTML / CSS / JS

About a code

Navigation with SVG

SVG used to animate a navigation bar. Effects are triggered on hover and click.

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

Responsive: no

Dependencies: tweenmax.js

Author

  • Takane Ichinose

Made with

  • HTML / CSS (SCSS) / JS

About a code

Ribbon Menu

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

Responsive: no

Dependencies: -

Author

  • Jorge

Made with

  • HTML / CSS / JS

About the code

Jelly Menu

Jelly menu concept in HTML, CSS and JS.

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

Responsive: no

Dependencies: -

Author

  • Jove Angelevski

Made with

  • HTML / CSS (SCSS) / JS

About the code

Navigation Buttons

UI navigation buttons.

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Leena Lavanya

Made with

  • HTML / CSS (SCSS) / JS

About the code

Code Menu

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

Responsive: yes

Dependencies: -

Author

  • Ryan Mulligan

Made with

  • HTML / CSS / JS

About the code

CSS Grid Menu Panels

Animated CSS grid-based menu panels. Click the toggle in the top left corner to see it in action.

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

Responsive: yes

Dependencies: -

Demo image: Dropdown Menu

Author

  • Veronica

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Dropdown Menu

Custom dropdown menu.

Demo image: Responsive Sidebar/Navbar

Author

  • Ferran Buireu

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel (jquery.js)

About the code

Responsive Sidebar/Navbar

Vertical/Horizontal responsive sidebar/navbar.

Demo image: Off-Canvas Navigation w/Page Transitions

Author

  • Kyle Brumm

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel (classList.js, smoothscroll.js)

About the code

Off-Canvas Navigation w/Page Transitions

More experimentation with transitions and navigation. Decided to add in a little bit for page transitions as well.

Demo image: Sidebar Template

Author

  • azouaoui mohamed

Made with

  • HTML
  • CSS (bootstrap.css, font-awesome.css)
  • JavaScript (jquery.js, bootstrap.js)

About the code

Sidebar Template

Sidebar template with drop down menu based on Bootstrap.

Demo image: Sidebar Indicators

Author

  • MAHESH AMBURE

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Sidebar Indicators

Sidebar menu with indicators.

Demo image: Circle Navigation

Author

  • Jesús Castro

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel (jQuery.js, TweenMax.js)

About the code

Circle Navigation

Experimental navigation menu for a technical website. Built with GreenSock Animation Platform and SVG.

Demo image: Submenu Expand

Author

  • Mikael Ainalem

Made with

  • HTML
  • CSS
  • JavaScript (anime.js)

About the code

Submenu Expand

A playful animation expanding the submenu on the toolbar in web apps. Translates, fades and morphes SVG icons. Inspired by Virgil Panas more submenu transition on dribbble.

Demo image: Morphing Tab Button With List

Author

  • Colin Horn

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Morphing Tab Button With List

Morphing button with a dropdown list beneath it.

Author

  • Miles Manners

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

ES6 Text Editor/Context Menu

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

Responsive: no

Dependencies: font-awesome.css,

Author

  • Shaw

Made with

  • HTML / CSS / JS

About a code

Hover Highlight Effect

Uses CSS variables, but still looks great without.

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • Darshan Rajadhyaksha

Made with

  • HTML / CSS / JS

About a code

Context Menu

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

Responsive: no

Dependencies: -

Demo image: Radial/Circular Menu Concept

Author

  • Glenn McComb

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

About the code

Radial/Circular Menu Concept

Experimenting with radial menus. Inspired by the right-click-to-expand radial menus of Rust. Change the number of menu items in the bottom right to see how it works with a different number of menu items.

Demo image: Dropdown Menu

Author

  • Lukasz

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Dropdown Menu

Nice dropdown menu.

Author

  • Anton Mudrenok

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Radial Menu Animation

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

Responsive: yes

Dependencies: tweenmax.js

Author

  • Rian Ariona

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

About a code

Style Dropdown Menu

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

Responsive: yes

Dependencies: -