Multilevel Navigation

Live Preview

Documentation

Webflow

Code

Setup: External Scripts

HTML

Copy

Step 1: Copy structure to Webflow

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

Step 2: Add Javascript

Step 3: Add Javascript

Javascript

Copy

function initMobileMenu() {
  // Add debounced listener once
  if (!initMobileMenu._resized) {
    initMobileMenu._resized = true;
    window.addEventListener('resize', () => {
      clearTimeout(initMobileMenu._timer);
      initMobileMenu._timer = setTimeout(initMobileMenu, 200);
    });
  }

  // Mobile menu logic below
  if (window.innerWidth >= 768) return;

  const btn = document.querySelector('[data-menu-button]');
  const nav = document.querySelector('[data-menu-status]');
  if (btn && nav) {
    btn.addEventListener('click', () => {
      nav.dataset.menuStatus = nav.dataset.menuStatus === 'open' ? 'closed' : 'open';
    });
  }

  const toggles = Array.from(document.querySelectorAll('[data-dropdown-toggle]'));
  toggles.forEach(t => {
    t.addEventListener('click', () => {
      const isOpen = t.dataset.dropdownToggle === 'open';
      toggles.forEach(other => {
        if (other !== t) {
          other.dataset.dropdownToggle = 'closed';
          if (other === document.activeElement) other.blur();
        }
      });
      t.dataset.dropdownToggle = isOpen ? 'closed' : 'open';
      if (isOpen && t === document.activeElement) t.blur();
    });
  });
}

document.addEventListener('DOMContentLoaded', () => {
  initMobileMenu();
});

Step 3: Add custom CSS

Step 2: Add custom 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-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]: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;
}


 /* ———— 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

Live Preview

Resource Details

Last updated
July 9, 2025
Type
The Vault
Category
Navigation
Need help?
Join Slack

:has selector

Advanced

CSS

Custom

Multi

Original source

Ilja van Eck

Multilevel Navigation

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Documentation

Responsiveness

Creator Credits

Welcome to the Vault 👋

Upgrade to lifetime

Osmo Slack Community

Need help?

Multilevel Navigation

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Documentation

Responsiveness

Creator Credits