Multilevel Navigation
Documentation
Webflow
Code
Setup: External Scripts
External Scripts in Webflow
Make sure to always put the External Scripts before the Javascript step of the resource.
In this video you learn where to put these in your Webflow project? Or how to include a paid GSAP Club plugin in your project?
HTML
Copy
Step 1: Copy structure to Webflow
Copy structure to Webflow
In the video below we described how you can copy + paste the structure of this resource to your Webflow project.
Copy to Webflow
Webflow structure is not required for this resource.
Step 1: Add HTML
HTML
Copy
<nav data-menu-status="closed" class="nav">
<div class="nav-container">
<div class="nav-bg"></div>
<div class="nav-inner">
<a href="#" class="nav-logo">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 108 24" fill="none">
<path d="M98.1531 8.07867C97.7723 8.45665 97.1213 8.18895 97.1213 7.65441V0H94.7037V8.99999C94.7037 9.9941 93.8918 10.8 92.8904 10.8H83.8242V13.2H91.5349C92.0734 13.2 92.3431 13.8463 91.9623 14.2242L86.5959 19.5514L88.3055 21.2485L93.6719 15.9213C94.0515 15.5445 94.6998 15.8095 94.7037 16.3408V24L97.1213 24L97.1213 15C97.1213 14.0059 97.9331 13.2 98.9345 13.2H108.001V10.8H100.285C99.7515 10.7962 99.4846 10.1564 99.8593 9.77907L99.8626 9.77574L105.229 4.44852L103.519 2.75149L98.1531 8.07867Z" fill="currentColor"></path>
<path d="M9.75885 22.3068C3.80901 22.3068 0 17.9736 0 12.0396C0 6.10564 3.80901 1.80005 9.75885 1.80005C15.7087 1.80005 19.5177 6.10564 19.5177 12.0396C19.5177 17.9736 15.7087 22.3068 9.75885 22.3068ZM3.19735 12.0396C3.19735 16.0968 5.06015 19.6848 9.75885 19.6848C14.4576 19.6848 16.3204 16.0968 16.3204 12.0396C16.3204 7.98244 14.4576 4.42205 9.75885 4.42205C5.06015 4.42205 3.19735 7.98244 3.19735 12.0396Z" fill="currentColor"></path>
<path d="M27.5934 22.3068C23.2839 22.3068 21.1431 20.0988 21.0597 17.2284H23.8122C23.9234 18.8568 24.9243 20.1264 27.5656 20.1264C29.9566 20.1264 30.5961 19.0776 30.5961 18.0564C30.5961 16.29 28.7055 16.0968 26.8705 15.7104C24.396 15.1308 21.5601 14.4132 21.5601 11.4876C21.5601 9.05884 23.5342 7.43044 26.9539 7.43044C30.8463 7.43044 32.7091 9.50044 32.9038 11.9292H30.1513C29.9566 10.8528 29.3728 9.61084 27.0095 9.61084C25.1745 9.61084 24.396 10.3284 24.396 11.3772C24.396 12.84 25.9808 12.978 27.9826 13.4196C30.5961 14.0268 33.432 14.772 33.432 17.9184C33.432 20.6508 31.319 22.3068 27.5934 22.3068Z" fill="currentColor"></path>
<path d="M44.0884 12.8952C44.0884 11.0184 43.6992 9.74884 41.6139 9.74884C39.5843 9.74884 38.3054 11.1564 38.3054 13.2816V21.9204H35.5807V7.84444H38.3054V9.61084H38.361C39.1117 8.53444 40.4184 7.43044 42.5592 7.43044C44.5332 7.43044 45.7566 8.31364 46.3126 9.88684H46.3682C47.3969 8.53444 48.8427 7.43044 51.0113 7.43044C53.875 7.43044 55.3208 9.14164 55.3208 12.15V21.9204H52.5961V12.8952C52.5961 11.0184 52.2069 9.74884 50.1216 9.74884C48.092 9.74884 46.8131 11.1564 46.8131 13.2816V21.9204H44.0884V12.8952Z" fill="currentColor"></path>
<path d="M64.6455 22.3344C60.2248 22.3344 57.5557 19.2984 57.5557 14.8824C57.5557 10.494 60.2248 7.40284 64.6733 7.40284C69.0661 7.40284 71.7352 10.4664 71.7352 14.8548C71.7352 19.2708 69.0661 22.3344 64.6455 22.3344ZM60.3916 14.8824C60.3916 17.808 61.7261 20.0988 64.6733 20.0988C67.5648 20.0988 68.8993 17.808 68.8993 14.8824C68.8993 11.9292 67.5648 9.66604 64.6733 9.66604C61.7261 9.66604 60.3916 11.9292 60.3916 14.8824Z" fill="currentColor"></path>
</svg>
</a>
<div class="nav-center">
<ul class="nav-center__list">
<li>
<button data-dropdown-toggle="" class="nav-link">
<span class="nav-link__label">Products</span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 17 10" fill="none" class="nav-link__dropdown-icon">
<path d="M1.5 1.5L8.5 8.5L15.5 1.5" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<div class="nav-dropdown">
<div class="nav-dropdown__overflow">
<div class="nav-dropdown__overflow-inner">
<div class="nav-container">
<ul class="nav-dropdown__content">
<li class="nav-dropdown__content-li">
<a href="#" class="nav-dropdown__link">
<div class="nav-dropdown__link-bg">
<img src="https://cdn.prod.website-files.com/686e38e4cff3784e230d2c25/686e567e67f6622d88a2e1c6_nav-img-1.avif" class="nav-dropdown__img">
<div class="nav-dropdown__img-overlay"></div>
</div>
<div class="nav-dropdown__link-inner">
<span class="nav-dropdown__link-label">Olaf</span>
<div class="nav-dropdown__link-bubble">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 16 16" fill="none" class="icon">
<path d="M9.33398 12.6666L14.0007 7.99992L9.33398 3.33325" stroke="currentColor" stroke-miterlimit="10"></path>
<path d="M14.0007 8H1.33398" stroke="currentColor" stroke-miterlimit="10"></path>
</svg>
</div>
</div>
</a>
</li>
<li class="nav-dropdown__content-li">
<a href="#" class="nav-dropdown__link ">
<div class="nav-dropdown__link-bg">
<img src="https://cdn.prod.website-files.com/686e38e4cff3784e230d2c25/686e567fc4fcdd19e150e190_nav-img-2.avif" class="nav-dropdown__img">
<div class="nav-dropdown__img-overlay"></div>
</div>
<div class="nav-dropdown__link-inner">
<span class="nav-dropdown__link-label">Stijn</span>
<div class="nav-dropdown__link-bubble">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 16 16" fill="none" class="icon">
<path d="M9.33398 12.6666L14.0007 7.99992L9.33398 3.33325" stroke="currentColor" stroke-miterlimit="10"></path>
<path d="M14.0007 8H1.33398" stroke="currentColor" stroke-miterlimit="10"></path>
</svg>
</div>
</div>
</a>
</li>
<li class="nav-dropdown__content-li">
<a href="#" class="nav-dropdown__link">
<div class="nav-dropdown__link-bg">
<img src="https://cdn.prod.website-files.com/686e38e4cff3784e230d2c25/686e567e2fca1779de2a029c_nav-img-3.avif" class="nav-dropdown__img">
<div class="nav-dropdown__img-overlay"></div>
</div>
<div class="nav-dropdown__link-inner">
<span class="nav-dropdown__link-label">Kees</span>
<div class="nav-dropdown__link-bubble">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 16 16" fill="none" class="icon">
<path d="M9.33398 12.6666L14.0007 7.99992L9.33398 3.33325" stroke="currentColor" stroke-miterlimit="10"></path>
<path d="M14.0007 8H1.33398" stroke="currentColor" stroke-miterlimit="10"></path>
</svg>
</div>
</div>
</a>
</li>
<li class="nav-dropdown__content-li">
<a href="#" class="nav-dropdown__link">
<div class="nav-dropdown__link-bg">
<img src="https://cdn.prod.website-files.com/686e38e4cff3784e230d2c25/686e567fc4fcdd19e150e18b_nav-img-4.avif" class="nav-dropdown__img">
<div class="nav-dropdown__img-overlay"></div>
</div>
<div class="nav-dropdown__link-inner">
<span class="nav-dropdown__link-label">Nelis</span>
<div class="nav-dropdown__link-bubble">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 16 16" fill="none" class="icon">
<path d="M9.33398 12.6666L14.0007 7.99992L9.33398 3.33325" stroke="currentColor" stroke-miterlimit="10"></path>
<path d="M14.0007 8H1.33398" stroke="currentColor" stroke-miterlimit="10"></path>
</svg>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>
<button data-dropdown-toggle="" class="nav-link">
<span class="nav-link__label">Services</span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 17 10" fill="none" class="nav-link__dropdown-icon">
<path d="M1.5 1.5L8.5 8.5L15.5 1.5" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<div class="nav-dropdown">
<div class="nav-dropdown__overflow">
<div class="nav-dropdown__overflow-inner">
<div class="nav-container">
<ul class="nav-dropdown__content">
<li class="nav-dropdown__content-li">
<a href="#" class="nav-dropdown__link is--static">
<div class="nav-dropdown__link-inner">
<span class="nav-dropdown__link-label">Custom Pieces</span>
<div class="nav-dropdown__link-bubble">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 16 16" fill="none" class="icon">
<path d="M9.33398 12.6666L14.0007 7.99992L9.33398 3.33325" stroke="currentColor" stroke-miterlimit="10"></path>
<path d="M14.0007 8H1.33398" stroke="currentColor" stroke-miterlimit="10"></path>
</svg>
</div>
</div>
</a>
</li>
<li class="nav-dropdown__content-li">
<a href="#" class="nav-dropdown__link is--static">
<div class="nav-dropdown__link-inner">
<span class="nav-dropdown__link-label">Renovation</span>
<div class="nav-dropdown__link-bubble">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 16 16" fill="none" class="icon">
<path d="M9.33398 12.6666L14.0007 7.99992L9.33398 3.33325" stroke="currentColor" stroke-miterlimit="10"></path>
<path d="M14.0007 8H1.33398" stroke="currentColor" stroke-miterlimit="10"></path>
</svg>
</div>
</div>
</a>
</li>
<li class="nav-dropdown__content-li">
<a href="#" class="nav-dropdown__link is--static">
<div class="nav-dropdown__link-inner">
<span class="nav-dropdown__link-label">Wholesale</span>
<div class="nav-dropdown__link-bubble">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 16 16" fill="none" class="icon">
<path d="M9.33398 12.6666L14.0007 7.99992L9.33398 3.33325" stroke="currentColor" stroke-miterlimit="10"></path>
<path d="M14.0007 8H1.33398" stroke="currentColor" stroke-miterlimit="10"></path>
</svg>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>
<a href="#" class="nav-link"><span class="nav-link__label">About</span></a>
</li>
<li>
<a href="#" class="nav-link"><span class="nav-link__label">News</span></a>
</li>
</ul>
</div>
<div class="nav-end">
<a href="#" class="nav-button md--hide">
<span>Contact Us</span>
</a>
<a href="#" class="nav-button is--primary">
<span>Enquire Now</span>
</a>
<button data-menu-button="" aria-label="toggle menu" class="menu-button">
<div class="menu-button__line"></div>
<div class="menu-button__line"></div>
</button>
</div>
</div>
</div>
<div class="page-bg"></div>
</nav>HTML structure is not required for this resource.
Step 2: Add CSS
CSS
Copy
:root{
--nav-bg-height: calc(20em + calc(2em + 3em + 2.5em + 3em));
--cubic-default: cubic-bezier(0.525, 0, 0, 1);
--duration-fast: 0.2s;
--duration-normal: 0.450s;
--color-dark: #2b1d15;
}
a{
color: inherit;
text-decoration: none;
}
a:focus-visible, button:focus-visible{
outline: 1px solid var(--color-dark);
}
.nav {
z-index: 100;
color: #fff;
position: fixed;
top: 0;
left: 0;
right: 0;
transition: color var(--duration-fast) var(--cubic-default);
}
.nav-inner {
justify-content: space-between;
align-items: center;
width: 100%;
padding-top: 2em;
display: flex;
position: relative;
}
.nav-container {
z-index: 1;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 3em;
padding-right: 3em;
position: relative;
}
.resource-bg {
color: #fff;
flex-flow: column;
justify-content: flex-end;
align-items: flex-start;
width: 100%;
height: 100svh;
padding-bottom: 2em;
padding-left: 2.5em;
display: flex;
position: relative;
}
.resource-bg__img {
z-index: 0;
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
inset: 0%;
}
.resource-bg__heading {
z-index: 1;
margin-top: 0;
margin-bottom: 0;
font-size: clamp(100px, 15vw, 200px);
font-weight: 500;
line-height: 1;
position: relative;
}
.nav-logo {
width: 6.75em;
}
.nav-end {
grid-column-gap: .75em;
grid-row-gap: .75em;
justify-content: flex-end;
align-items: stretch;
display: flex;
}
.nav-button {
border: 1px solid;
border-radius: .25em;
justify-content: center;
align-items: center;
height: 3em;
padding-left: 1em;
padding-right: 1em;
font-size: 1em;
line-height: 1.4;
display: flex;
transition: all var(--duration-fast) var(--cubic-default);
}
.nav-button.is--primary {
color: #2b1d15;
background-color: #fff;
border-color: #fff;
}
.nav-center__list {
justify-content: center;
align-items: center;
margin-bottom: 0;
padding-left: 0;
list-style: none;
display: flex;
}
.nav-link {
grid-column-gap: .375em;
grid-row-gap: .375em;
background-color: #0000;
border-radius: .25em;
justify-content: center;
align-items: center;
padding: .75em 1.25em;
display: flex;
}
.nav-link__label {
font-size: 1.25em;
line-height: 1;
position: relative;
}
.nav-link__dropdown-icon {
width: .875em;
}
.nav-dropdown {
opacity: 0;
pointer-events: none;
visibility: hidden;
width: 100%;
padding-top: 2.5em;
padding-bottom: 3em;
position: fixed;
left: 0;
right: 0;
transition: all var(--duration-fast) ease, transform var(--duration-normal) var(--cubic-default);
}
.nav-dropdown.visible {
opacity: 100;
pointer-events: auto;
visibility: visible;
}
.nav-bg {
background-color: #fff;
border-bottom-right-radius: .75em;
border-bottom-left-radius: .75em;
width: 100%;
height: 0;
position: absolute;
inset: 0% 0% auto;
transition: height var(--duration-normal) var(--cubic-default);
}
.nav-dropdown__content {
grid-column-gap: 1.25em;
grid-row-gap: 1.25em;
width: 100%;
margin-bottom: 0;
padding-left: 0;
list-style: none;
display: flex;
}
.nav-dropdown__content-li {
flex: 1;
}
.nav-dropdown__link {
color: #fff;
background-color: #ebe7e4;
border-radius: .25em;
flex-flow: column;
flex: 1;
justify-content: flex-end;
align-items: stretch;
height: 20em;
padding: 1.5em;
display: flex;
position: relative;
overflow: hidden;
}
.nav-dropdown__link.is--static {
color: #2b1d15;
transition: background-color .2s cubic-bezier(.625, .05, 0, 1);
}
.nav-dropdown__link-inner {
z-index: 1;
justify-content: space-between;
align-items: center;
display: flex;
position: relative;
}
.nav-dropdown__link-label {
font-size: 1.75em;
transition: transform .2s cubic-bezier(.625, .05, 0, 1);
}
.nav-dropdown__link-bubble {
color: #fff;
background-color: #2b1d15;
border-radius: 100em;
justify-content: center;
align-items: center;
width: 1.5em;
height: 1.5em;
padding: .25em;
transition: transform .2s cubic-bezier(.625, .05, 0, 1);
display: flex;
}
.icon {
width: 100%;
height: 100%;
}
.nav-dropdown__link-bg {
position: absolute;
inset: 0%;
}
.nav-dropdown__img {
object-fit: cover;
width: 100%;
height: 100%;
transition: transform .35s cubic-bezier(.625, .05, 0, 1);
}
.nav-dropdown__img-overlay {
z-index: 1;
opacity: .25;
background-image: linear-gradient(#0000, #0000 50%, #000);
transition: opacity .2s cubic-bezier(.625, .05, 0, 1);
position: absolute;
inset: 0%;
}
.page-bg {
z-index: 0;
opacity: 0;
pointer-events: none;
background-color: #0000004d;
width: 100%;
height: 100vh;
position: absolute;
inset: 0% 0% auto;
transition: opacity var(--duration-fast) var(--cubic-default);
}
.menu-button {
grid-column-gap: .25em;
grid-row-gap: .25em;
background-color: currentColor;
border-radius: .25em;
flex-flow: column;
justify-content: center;
align-items: center;
width: 3em;
height: 3em;
padding: .75em;
display: none;
}
.menu-button.is--primary {
color: #2b1d15;
background-color: #fff;
border-color: #fff;
}
.menu-button__line {
background-color: #2b1d15;
width: 100%;
height: 1px;
}
/* ———— SHOW DROPDOWN ———— */
.nav-dropdown{
transition: all var(--duration-fast) ease, transform var(--duration-normal) var(--cubic-default);
}
[data-dropdown-toggle]:hover + .nav-dropdown,
[data-dropdown-toggle]:focus-visible + .nav-dropdown,
.nav-dropdown:hover,
.nav-dropdown:focus-within{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* ———— STYLING WHEN DROPDOWN IS OPEN ———— */
:is(
body:has([data-dropdown-toggle]:hover),
body:has([data-dropdown-toggle]:focus-visible),
body:has([data-dropdown-toggle]:focus-within),
body:has(.nav-dropdown:hover),
body:has(.nav-dropdown:focus-within)
){
.nav-bg{
height: var(--nav-bg-height);
}
.page-bg{
opacity: 1;
}
.nav{
color: var(--color-dark);
}
.nav-button{
border-color: var(--color-dark);
color: var(--color-dark);
}
.nav-button.is--primary{
background-color: var(--color-dark);
border-color: var(--color-dark);
color: #FFF;
}
}
/* ———— DROPDOWN TOGGLE ———— */
.nav-link__dropdown-icon{
transition: transform var(--duration-normal) var(--cubic-default);
}
[data-dropdown-toggle]{
transition: background-color var(--duration-fast) var(--cubic-default);
}
/* ———— DESKTOP HOVER AND FOCUS ———— */
@media screen and (min-width: 768px){
[data-dropdown-toggle]:hover .nav-link__dropdown-icon,
[data-dropdown-toggle]:focus .nav-link__dropdown-icon,
[data-dropdown-toggle]:focus-within .nav-link__dropdown-icon,
[data-dropdown-toggle]:has(+ .nav-dropdown:hover) .nav-link__dropdown-icon,
[data-dropdown-toggle]:has(+ .nav-dropdown:focus-within) .nav-link__dropdown-icon{
transform: rotate(180deg);
}
[data-dropdown-toggle]:hover,
[data-dropdown-toggle]:focus,
[data-dropdown-toggle]:focus-within,
[data-dropdown-toggle]:has(+ .nav-dropdown:hover),
[data-dropdown-toggle]:has(+ .nav-dropdown:focus-within){
background-color: #EBE7E4;
}
}
/ *———— DROPDOWN CONTENT LIST ITEMS ———— */
.nav-dropdown__content-li{
transition: all var(--duration-normal) var(--cubic-default);
transition-delay: 0.18s;
opacity:0;
transform: translate(4em, 0px);
}
.nav-dropdown__content-li:nth-child(2){ transition-delay:0.24s; }
.nav-dropdown__content-li:nth-child(3){ transition-delay:0.3s; }
.nav-dropdown__content-li:nth-child(4){ transition-delay:0.36s; }
.nav-dropdown__content-li:nth-child(5){ transition-delay:0.44s; }
body:has([data-dropdown-toggle]:hover) [data-dropdown-toggle]:hover + .nav-dropdown .nav-dropdown__content-li,
body:has([data-dropdown-toggle]:focus-visible) .nav-dropdown__content-li,
body:has([data-dropdown-toggle]:focus-within) .nav-dropdown__content-li,
body:has(.nav-dropdown:hover) .nav-dropdown__content-li,
body:has(.nav-dropdown:focus-within) .nav-dropdown__content-li{
opacity: 1;
transform: translate(0em, 0px);
}
/* ———— DROPDOWN LINKS + IMAGES ———— */
.nav-dropdown__link:hover .nav-dropdown__img-overlay,
.nav-dropdown__link:focus-visible .nav-dropdown__img-overlay{
opacity: 0;
}
.nav-dropdown__link:hover .nav-dropdown__img,
.nav-dropdown__link:focus-visible .nav-dropdown__img{
transform: scale(1.1);
}
/* ———— DROPDOWN LINKS ———— */
.nav-dropdown__link.is--static:hover,
.nav-dropdown__link.is--static:focus-visible{
background: #D7D1CD;
}
/* ———— NAV LINKS ———— */
a.nav-link .nav-link__label::after{
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 1px;
background: currentColor;
transition: transform var(--duration-normal) var(--cubic-default);
transform: scale(0, 1);
transform-origin: right center;
}
a.nav-link:hover .nav-link__label::after,
a.nav-link:focus-visible .nav-link__label::after{
transform: scale(1, 1);
transform-origin: left center;
}
@media screen and (max-width: 991px) {
.nav-inner {
padding-top: 1.25em;
}
.nav-container {
padding-left: 1.25em;
padding-right: 1.25em;
}
.nav-button.md--hide {
display: none;
}
.nav-link {
padding-left: 1em;
padding-right: 1em;
}
.nav-link__label {
font-size: 1em;
}
.md--hide, .menu-button.md--hide {
display: none;
}
}
@media screen and (max-width: 767px) {
.nav-logo {
z-index: 1;
position: relative;
}
.nav-end {
z-index: 2;
position: relative;
}
.nav-center {
z-index: 0;
opacity: 0;
visibility: hidden;
height: 100dvh;
position: absolute;
top: 0;
left: -1.25em;
right: -1.25em;
transform: translate(0, 1em);
}
.nav-center__list {
flex-flow: column;
justify-content: flex-start;
align-items: stretch;
height: 100%;
padding-top: 8em;
overflow: hidden scroll;
}
.nav-link {
justify-content: space-between;
align-items: center;
width: 100%;
padding: 1em 1.25em;
}
.nav-link__label {
font-size: 2em;
}
.nav-dropdown {
opacity: 100;
pointer-events: auto;
visibility: visible;
padding-top: 0;
padding-bottom: 0;
position: relative;
inset: auto;
}
.nav-bg {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
height: 0;
}
.nav-dropdown__overflow {
grid-template-rows: 0fr;
width: 100%;
display: grid;
position: relative;
overflow: hidden;
}
.nav-dropdown__overflow-inner {
flex-flow: column;
width: 100%;
height: 1000000%;
display: flex;
position: relative;
overflow: hidden;
}
.nav-dropdown__content {
grid-gap: .75em;
grid-template-columns: repeat(2, 1fr);
padding-top: 1em;
padding-bottom: 1em;
display: grid;
}
.nav-dropdown__link {
aspect-ratio: 1;
height: auto;
padding: 1em;
}
.nav-dropdown__link-label {
font-size: 1.25em;
}
.sm--hide {
display: none;
}
.menu-button {
display: flex;
}
:root{
--nav-bg-height: 100dvh;
}
.nav-dropdown__overflow{
transition: grid-template-rows var(--duration-normal) var(--cubic-default);
}
.nav-center{
transition: all var(--duration-normal) var(--cubic-default), opacity var(--duration-fast) var(--cubic-default);
}
.menu-button__line{
transition: all var(--duration-normal) var(--cubic-default);
}
/* ———— STYLES WHEN MENU IS OPEN ———— */
:is(
[data-menu-status="open"]
){
color: var(--color-dark);
.menu-button__line:nth-of-type(1){
transform: translate(0px, 0.125em) rotate(135deg);
background-color: #FFF;
}
.menu-button__line:nth-of-type(2){
transform: translate(0px, -0.175em) rotate(-135deg);
background-color: #FFF;
}
.nav-bg{
height: var(--nav-bg-height);
}
.page-bg{
opacity: 1;
}
.nav-button.is--primary{
background-color: var(--color-dark);
border-color: var(--color-dark);
color: #FFF;
}
.nav-center{
opacity: 1;
visibility: visible;
transform: translate(0px, 0em);
transition-delay: 0.1s;
}
}
[data-dropdown-toggle="open"] + .nav-dropdown .nav-dropdown__overflow{
grid-template-rows: 1fr;
}
[data-dropdown-toggle="open"] + .nav-dropdown .nav-dropdown__content-li{
opacity: 1;
transform: translate(0em, 0px);
}
[data-dropdown-toggle="open"] .nav-link__dropdown-icon{
transform: rotate(180deg);
}
}
@media screen and (max-width: 479px) {
.resource-bg__heading {
font-size: clamp(40px, 15vw, 200px);
}
.nav-logo {
width: 5em;
}
.nav-end {
grid-column-gap: .5em;
grid-row-gap: .5em;
}
.nav-button.is--primary {
height: 2.5em;
padding-left: .75em;
padding-right: .75em;
}
.nav-dropdown__link {
padding: .75em;
}
.nav-dropdown__link-label {
font-size: 1em;
}
.nav-dropdown__link-bubble {
width: 1.25em;
height: 1.25em;
padding: .375em;
}
.xs--hide {
display: none;
}
.menu-button {
width: 2.5em;
height: 2.5em;
}
}
Step 2: Add custom Javascript
Custom Javascript in Webflow
In this video, Ilja gives you some guidance about using JavaScript in Webflow:
Step 2: Add Javascript
Step 3: Add Javascript
Javascript
Copy
function initNavigation() {
if (!initNavigation._hasResizeListener) {
initNavigation._hasResizeListener = true;
window.addEventListener('resize', debounce(initNavigation, 200));
}
const isMobile = window.innerWidth < 768;
if (isMobile && initNavigation._lastMode !== 'mobile') {
initMobileMenu();
initNavigation._lastMode = 'mobile';
} else if (!isMobile && initNavigation._lastMode !== 'desktop') {
initDesktopDropdowns();
initNavigation._lastMode = 'desktop';
}
}
function debounce(fn, delay) {
let timer;
return () => {
clearTimeout(timer);
timer = setTimeout(fn, delay);
};
}
function initMobileMenu() {
const btn = document.querySelector('[data-menu-button]');
const nav = document.querySelector('[data-menu-status]');
if (!btn || !nav) return;
btn.setAttribute('aria-expanded', 'false');
btn.setAttribute('aria-controls', 'mobile-navigation');
nav.setAttribute('id', 'mobile-navigation');
nav.setAttribute('role', 'navigation');
nav.setAttribute('aria-label', 'Main navigation');
if (!btn._mobileClick) {
btn._mobileClick = true;
btn.addEventListener('click', () => {
const open = nav.dataset.menuStatus === 'open';
nav.dataset.menuStatus = open ? 'closed' : 'open';
btn.setAttribute('aria-expanded', !open);
// Close all dropdowns when closing the menu
if (open) {
Array.from(document.querySelectorAll('[data-dropdown-toggle]')).forEach(toggle => {
toggle.dataset.dropdownToggle = 'closed';
toggle.setAttribute('aria-expanded', 'false');
});
}
});
}
Array.from(document.querySelectorAll('[data-dropdown-toggle]')).forEach((toggle, i) => {
const dd = toggle.nextElementSibling;
if (!dd || !dd.classList.contains('nav-dropdown')) return;
if (toggle._mobileDropdownInit) return;
toggle._mobileDropdownInit = true;
toggle.setAttribute('aria-expanded', 'false');
toggle.setAttribute('aria-haspopup', 'true');
toggle.setAttribute('aria-controls', `dropdown-${i}`);
dd.setAttribute('id', `dropdown-${i}`);
dd.setAttribute('role', 'menu');
dd.querySelectorAll('.nav-dropdown__link')
.forEach(link => link.setAttribute('role', 'menuitem'));
toggle.addEventListener('click', () => {
const open = toggle.dataset.dropdownToggle === 'open';
Array.from(document.querySelectorAll('[data-dropdown-toggle]'))
.forEach(other => {
if (other !== toggle) {
other.dataset.dropdownToggle = 'closed';
other.setAttribute('aria-expanded', 'false');
if (other === document.activeElement) other.blur();
}
});
toggle.dataset.dropdownToggle = open ? 'closed' : 'open';
toggle.setAttribute('aria-expanded', !open);
if (open && toggle === document.activeElement) toggle.blur();
});
});
}
function initDesktopDropdowns() {
const toggles = Array.from(document.querySelectorAll('[data-dropdown-toggle]'));
const links = Array.from(document.querySelectorAll('.nav-link:not([data-dropdown-toggle])'));
toggles.forEach((toggle, i) => {
const dd = toggle.nextElementSibling;
if (!dd || !dd.classList.contains('nav-dropdown') || toggle._desktopInit) return;
toggle._desktopInit = true;
toggle.setAttribute('aria-expanded', 'false');
toggle.setAttribute('aria-haspopup', 'true');
toggle.setAttribute('aria-controls', `desktop-dropdown-${i}`);
dd.setAttribute('id', `desktop-dropdown-${i}`);
dd.setAttribute('role', 'menu');
dd.setAttribute('aria-hidden', 'true');
dd.querySelectorAll('.nav-dropdown__link')
.forEach(link => link.setAttribute('role', 'menuitem'));
toggle.addEventListener('click', e => {
e.preventDefault();
toggles.forEach(other => {
if (other !== toggle) {
other.dataset.dropdownToggle = 'closed';
other.setAttribute('aria-expanded', 'false');
const otherDropdown = other.nextElementSibling;
if (otherDropdown) otherDropdown.setAttribute('aria-hidden', 'true');
}
});
const open = toggle.dataset.dropdownToggle !== 'open';
toggle.dataset.dropdownToggle = 'open';
toggle.setAttribute('aria-expanded', 'true');
dd.setAttribute('aria-hidden', 'false');
if (open) {
const first = dd.querySelector('.nav-dropdown__link');
if (first) first.focus();
}
});
toggle.addEventListener('mouseenter', () => {
const anyOpen = toggles.some(x => x.dataset.dropdownToggle === 'open');
toggles.forEach(other => {
if (other !== toggle) {
other.dataset.dropdownToggle = 'closed';
other.setAttribute('aria-expanded', 'false');
const otherDropdown = other.nextElementSibling;
if (otherDropdown) otherDropdown.setAttribute('aria-hidden', 'true');
}
});
if (anyOpen) {
setTimeout(() => {
toggle.dataset.dropdownToggle = 'open';
toggle.setAttribute('aria-expanded', 'true');
dd.setAttribute('aria-hidden', 'false');
}, 20);
} else {
toggle.dataset.dropdownToggle = 'open';
toggle.setAttribute('aria-expanded', 'true');
dd.setAttribute('aria-hidden', 'false');
}
});
dd.addEventListener('mouseleave', () => {
toggle.dataset.dropdownToggle = 'closed';
toggle.setAttribute('aria-expanded', 'false');
dd.setAttribute('aria-hidden', 'true');
});
toggle.addEventListener('keydown', e => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggle.click();
} else if (e.key === 'Escape') {
toggle.dataset.dropdownToggle = 'closed';
toggle.setAttribute('aria-expanded', 'false');
dd.setAttribute('aria-hidden', 'true');
toggle.focus();
}
});
dd.addEventListener('keydown', e => {
const items = Array.from(dd.querySelectorAll('.nav-dropdown__link'));
const idx = items.indexOf(document.activeElement);
if (e.key === 'ArrowDown') {
e.preventDefault();
items[(idx + 1) % items.length].focus();
} else if (e.key === 'ArrowUp') {
e.preventDefault();
items[(idx - 1 + items.length) % items.length].focus();
} else if (e.key === 'Escape') {
e.preventDefault();
toggle.dataset.dropdownToggle = 'closed';
toggle.setAttribute('aria-expanded', 'false');
dd.setAttribute('aria-hidden', 'true');
toggle.focus();
} else if (e.key === 'Tab' && !dd.contains(e.relatedTarget)) {
toggle.dataset.dropdownToggle = 'closed';
toggle.setAttribute('aria-expanded', 'false');
dd.setAttribute('aria-hidden', 'true');
}
});
});
links.forEach(link => {
link.addEventListener('mouseenter', () => {
toggles.forEach(toggle => {
toggle.dataset.dropdownToggle = 'closed';
toggle.setAttribute('aria-expanded', 'false');
const dd = toggle.nextElementSibling;
if (dd) dd.setAttribute('aria-hidden', 'true');
});
});
});
document.addEventListener('click', e => {
const inside = toggles.some(toggle => {
const dd = toggle.nextElementSibling;
return toggle.contains(e.target) || (dd && dd.contains(e.target));
});
if (!inside) {
toggles.forEach(toggle => {
toggle.dataset.dropdownToggle = 'closed';
toggle.setAttribute('aria-expanded', 'false');
const dd = toggle.nextElementSibling;
if (dd) dd.setAttribute('aria-hidden', 'true');
});
}
});
}
// Initialize Multilevel Navigation
document.addEventListener('DOMContentLoaded', () => {
initNavigation();
});Step 3: Add custom CSS
Step 2: Add custom CSS
Custom CSS in Webflow
Curious about where to put custom CSS in Webflow? Ilja explains it in the below video:
CSS
Copy
:root {
--nav-bg-height: calc(20em + calc(2em + 3em + 2.5em + 3em));
--cubic-default: cubic-bezier(0.525, 0, 0, 1);
--duration-fast: 0.2s;
--duration-normal: 0.450s;
--color-dark: #2b1d15;
}
a {
color: inherit;
text-decoration: none;
}
a:focus-visible,
button:focus-visible {
outline: 1px solid var(--color-dark);
}
.nav-bg {
transition: height var(--duration-normal) var(--cubic-default);
}
.page-bg {
transition: opacity var(--duration-fast) var(--cubic-default);
}
.nav {
transition: color var(--duration-fast) var(--cubic-default);
}
.nav-button {
transition: all var(--duration-fast) var(--cubic-default);
}
/* ———— SHOW DROPDOWN ———— */
.nav-dropdown {
transition: all var(--duration-fast) ease, transform var(--duration-normal) var(--cubic-default);
}
[data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover+.nav-dropdown,
[data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-visible+.nav-dropdown,
[data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:hover,
[data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:focus-within,
.wf-design-mode [data-dropdown-toggle="open"]+.nav-dropdown{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/*———— STYLING WHEN DROPDOWN IS OPEN ———— */
:is(body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover),
body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-visible),
body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within),
body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:hover),
body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:focus-within)),
.wf-design-mode body:has([data-dropdown-toggle="open"]){
.nav-bg {
height: var(--nav-bg-height);
}
.page-bg {
opacity: 1;
}
.nav {
color: var(--color-dark);
}
.nav-button {
border-color: var(--color-dark);
color: var(--color-dark);
}
.nav-button.is--primary {
background-color: var(--color-dark);
border-color: var(--color-dark);
color: #FFF;
}
}
/*———— DROPDOWN TOGGLE ———— */
.nav-link__dropdown-icon {
transition: transform var(--duration-normal) var(--cubic-default);
}
[data-dropdown-toggle] {
transition: background-color var(--duration-fast) var(--cubic-default);
}
/*———— DESKTOP HOVER AND FOCUS ———— */
@media screen and (min-width: 768px) {
[data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover .nav-link__dropdown-icon,
[data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus .nav-link__dropdown-icon,
[data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within .nav-link__dropdown-icon,
[data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:hover) .nav-link__dropdown-icon,
[data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:focus-within) .nav-link__dropdown-icon {
transform: rotate(180deg);
}
[data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover,
[data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus,
[data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within,
[data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:hover),
[data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:focus-within),
.wf-design-mode body:has([data-dropdown-toggle"open"])+.nav-dropdown{
background-color: #EBE7E4;
}
}
/*———— DROPDOWN CONTENT LIST ITEMS ———— */
.nav-dropdown__content-li {
transition: all var(--duration-normal) var(--cubic-default);
transition-delay: 0.18s;
opacity: 0;
transform: translate(4em, 0px);
}
.nav-dropdown__content-li:nth-child(2) {
transition-delay: 0.24s;
}
.nav-dropdown__content-li:nth-child(3) {
transition-delay: 0.3s;
}
.nav-dropdown__content-li:nth-child(4) {
transition-delay: 0.36s;
}
.nav-dropdown__content-li:nth-child(5) {
transition-delay: 0.44s;
}
body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover) [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover+.nav-dropdown .nav-dropdown__content-li,
body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-visible) .nav-dropdown__content-li,
body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within) .nav-dropdown__content-li,
body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:hover) .nav-dropdown__content-li,
body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:focus-within) .nav-dropdown__content-li,
.wf-design-mode [data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__content-li{
opacity: 1;
transform: translate(0em, 0px);
}
/*———— DROPDOWN LINKS + IMAGES ———— */
.nav-dropdown__link:hover .nav-dropdown__img-overlay,
.nav-dropdown__link:focus-visible .nav-dropdown__img-overlay {
opacity: 0;
}
.nav-dropdown__link:hover .nav-dropdown__img,
.nav-dropdown__link:focus-visible .nav-dropdown__img {
transform: scale(1.1);
}
/*———— DROPDOWN LINKS ———— */
.nav-dropdown__link.is--static:hover,
.nav-dropdown__link.is--static:focus-visible {
background: #D7D1CD;
}
/* ———— NAV LINKS ———— */
a.nav-link .nav-link__label::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 1px;
background: currentColor;
transition: transform var(--duration-normal) var(--cubic-default);
transform: scale(0, 1);
transform-origin: right center;
}
a.nav-link:hover .nav-link__label::after,
a.nav-link:focus-visible .nav-link__label::after {
transform: scale(1, 1);
transform-origin: left center;
}
/* ———— MOBILE STATE WITH BURGER MENU ———— */
@media screen and (max-width: 767px) {
:root {
--nav-bg-height: 100dvh;
}
.nav-dropdown__overflow {
transition: grid-template-rows var(--duration-normal) var(--cubic-default);
}
.nav-center {
transition: all var(--duration-normal) var(--cubic-default), opacity var(--duration-fast) var(--cubic-default);
}
.menu-button__line {
transition: all var(--duration-normal) var(--cubic-default);
}
/* ———— STYLES WHEN MENU IS OPEN ———— */
:is([data-menu-status="open"]) {
color: var(--color-dark);
.menu-button__line:nth-of-type(1) {
transform: translate(0px, 0.125em) rotate(135deg);
background-color: #FFF;
}
.menu-button__line:nth-of-type(2) {
transform: translate(0px, -0.175em) rotate(-135deg);
background-color: #FFF;
}
.nav-bg {
height: var(--nav-bg-height);
}
.page-bg {
opacity: 1;
}
.nav-button.is--primary {
background-color: var(--color-dark);
border-color: var(--color-dark);
color: #FFF;
}
.nav-center {
opacity: 1;
visibility: visible;
transform: translate(0px, 0em);
transition-delay: 0.1s;
}
}
[data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__overflow {
grid-template-rows: 1fr;
}
[data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__content-li {
opacity: 1;
transform: translate(0em, 0px);
}
[data-dropdown-toggle="open"] .nav-link__dropdown-icon {
transform: rotate(180deg);
}
}Documentation
This created with the aim of providing you with a thorough starting point for all your custom navigation bars. All of the animations are handled by CSS transition, so you're free to tweak any easing and duration as you want.
Responsiveness
To keep things organized, the elements that form the center nav links on desktop, are the same elements used for the mobile menu. So there's some pretty significant style changes happening on smaller breakpoints. In our example, we switch to a burger menu on screens smaller than 768px wide. You are free to change this to whatever breakpoint you want. Just make sure to:
- Update the CSS for the breakpoints accordingly
- Update the CSS media queries that decide between desktop/mobile animations
- Update the JS function for the dropdown toggles to match your new breakpoint
Edit dropdown content in Webflow
To make editing the dropdown contents in Webflow specifically a bit easier, you can set the [data-dropdown-toggle="open"] status on any dropdown toggle. Simply remove the "open" value again to continue editing the rest of the site.
Resource details
Last updated
October 23, 2025
Category
Navigation
Need help?
Join Slack
Original source
Ilja van EckCreator Credits
We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.