I've been looking at this [Codepen](https://codepen.io/aaroniker/pen/pezemX?editors=0010), and trying to find a vanilla JS way to do this (my company doesn't use jQuery).

So far I've made the line the correct width when you click on a menu item, but I can't figure out how to make it stretch like in the Codepen. I added a custom attribute of `index` to keep track of numbers, and also applied a class to easily target the element. I wasn't sure if there's also a way to just have one. Feel free to change what I've already made.

EDIT: I updated the code below to make it work going left, but not right. Also it only works if the links are next to each other. Anyone?

My codepen: <https://codepen.io/ahoward-mm/pen/jOmgxQJ?editors=0010> (desktop only).

```js
var navList = document.querySelector(".navigation__list");
var navItems = navList.getElementsByClassName("navigation__item");
var navLine = document.querySelector(".navigation__line");

for (var i = 0; i < navItems.length; i++) {
  navItems[i].classList.add(`navigation__item--${i + 1}`);
  navItems[i].setAttribute("index", `${i + 1}`);

  var prevItem = 0;
  var currentItem = 1;

  navItems[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");

    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }

    this.className += " active";

    prevItem = currentItem;

    currentItem = this.getAttribute("index");

    navLine.style.width = `${
      document
        .querySelector(`.navigation__item--${currentItem}`)
        .querySelector(".navigation__link")
        .getBoundingClientRect().width +
      document
        .querySelector(`.navigation__item--${prevItem}`)
        .getBoundingClientRect().width
    }px`;

    navLine.style.left = `${
      this.querySelector(".navigation__link").offsetLeft
    }px`;

    setTimeout(function() {
      navLine.style.width = `${
        document
          .querySelector(`.navigation__item--${currentItem}`)
          .querySelector(".navigation__link")
          .getBoundingClientRect().width
      }px`;
    }, 700);
  });
}
```

```css
body {
  color: #444;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.navigation {
  display: block;
  position: sticky;
  top: -0.5px;
  background-color: #edece8;
  margin: 60px 0 0;
  text-align: center;
}

.navigation__list {
  list-style: none;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  position: relative;
}

.navigation__link {
  color: inherit;
  line-height: inherit;
  word-wrap: break-word;
  text-decoration: none;
  background-color: transparent;
  display: block;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.875rem;
  font-weight: bold;
  margin: 15px (20px * 2) 0 (20px * 2);
  position: relative;
}

.navigation__line {
  height: 2px;
  position: absolute;
  bottom: 0;
  margin: 10px 0 0 0;
  background: red;
  transition: all 1s;
}

.navigation__item {
  list-style: none;
  display: flex;
}
```

```html
<nav class="navigation">
  <ul class="navigation__list">
    <li class="navigation__item">
      <a class="navigation__link" href="#">Lorem ipsum</a>
    </li>
    <li class="navigation__item">
      <a class="navigation__link" href="#">Dolor</a>
    </li>
    <li class="navigation__item">
      <a class="navigation__link" href="#">Consectetur adipiscing</a>
    </li>
    <li class="navigation__item">
      <a class="navigation__link" href="#">Donec ut</a>
    </li>
    <li class="navigation__item">
      <a class="navigation__link" href="#">Placerat dignissim</a>
    </li>
    <div class="navigation__line"></div>
  </ul>
</nav>
```