Collection of free vanilla JavaScript navigation menu code examples: responsive, animated, dropdown, sticky and full page.
Related Articles
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 / 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
- 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.