Collection of free vanilla JavaScript navigation menu code examples: responsive, animated, dropdown, sticky and full page.

34 JavaScript Menus

Collection of free vanilla JavaScript navigation menu code examples: responsive, animated, dropdown, sticky and full page.

Related Articles

  1. CSS Menus
  2. jQuery Menus
  3. React Menus

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

  • 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.

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.

back to top