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
Links
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: -
Links
Made with
- HTML / CSS / JS
About a code
Vector/ Project Selection
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Travel Video Landing Page
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Twitter Sidebar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
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
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Button Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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
Links
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: -
Links
Made with
- HTML / CSS / JS
About a code
Full Screen Navigation Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Menu Navigation Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Travel/Tracking Website Landing Page
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Context Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
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: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
The 3D Navigation Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Jumping Gooey Navigation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS / JS
About a code
Full Screen Overlay Navigation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Nav Stretch
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
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
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Link Hover Interaction
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: splitting.js
Links
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
Links
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: -
Links
Made with
- HTML / CSS / JS
About a code
Grid Navigation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS / JS
About a code
The Context Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
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
Links
Made with
- HTML / CSS / JS
About a code
Expandable Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS (TypeScript)
About a code
Header Underline
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS (TypeScript)
About a code
Staggered Blink Text Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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
Links
Made with
- HTML / CSS / JS
About a code
Paper Pieces Navigation Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Full Page Navigation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
Made with
- HTML / CSS / JS
About a code
Window Shade Navigation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
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
Links
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: -
Links
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: -
Links
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
Links
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
Links
Made with
- HTML / CSS / JS
About a code
Nav Menu with Circular Reveal Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
Menu Interaction
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Navigation & Sub-navigation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: anime.js
Links
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: -
Links
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
Links
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
Links
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: -
Links
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: -
Links
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
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Ribbon Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
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: -
Links
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
Links
Made with
- HTML / CSS (SCSS) / JS
About the code
Code Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -

Links
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
Dropdown Menu
Custom dropdown menu.

Links
Made with
- HTML
- CSS/SCSS
- JavaScript/Babel (jquery.js)
About the code
Responsive Sidebar/Navbar
Vertical/Horizontal responsive sidebar/navbar.

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

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

Links
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
Sidebar Indicators
Sidebar menu with indicators.

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

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

Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Morphing Tab Button With List
Morphing button with a dropdown list beneath it.
Links
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,
Links
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
Links
Made with
- HTML / CSS / JS
About a code
Context Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

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

Links
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
Dropdown Menu
Nice dropdown menu.
Links
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
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS (Babel)
About a code
Style Dropdown Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -