JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item"><a href="" class="nav__link">Lorem.</a></li>
    <li class="nav__item js-openable">
      <a href="" class="nav__link -hasDropdown js-opensDropdown">Autem.</a>
      <ul class="nav__list -dropdown">
        <li class="nav__item"><a href="" class="nav__link">Voluptatem.</a></li>
        <li class="nav__item"><a href="" class="nav__link">Animi!</a></li>
        <li class="nav__item"><a href="" class="nav__link">Delectus.</a></li>
        <li class="nav__item"><a href="" class="nav__link">Alias.</a></li>
      </ul>
    </li>
    <li class="nav__item"><a href="" class="nav__link">Officia.</a></li>
    <li class="nav__item"><a href="" class="nav__link">Doloremque.</a></li>
  </ul>
</nav>

SCSS

.nav {
  &__list {
    display: flex;
    list-style: none;
    
    &.-dropdown {
      display: none;
      position: absolute;
    }
  }
  
  &__link {
    text-decoration: none;
    padding: 1rem;
  }
  
  .-open &__list {
    display: block;
  }
}

JavaScript

$('.js-opensDropdown').keydown(function({keyCode}) {
	const openable = $(this).closest('.js-openable');
  if (keyCode === 13) {
  	if (!openable.is('.-open')) {
    	event.preventDefault();
    }
    openable.addClass('-open');
  } else if (keyCode === 27) {
  	openable.removeClass('-open');
  }
});