title: Highlight current navigation tab based on url or subdirectory
body: <p>I've created a vertical navigation on the left of our site. We'd like the background color for a <code>.item</code> to change based on the subdirectory where a user is viewing content. So if someone clicks on a nav <code>.item</code>, the href will redirect them to a page and we want that <code>.item</code> to be highlighted a unique hex color that we can customize for each nav <code>.item</code>. All 6 nav items would have a different color.</p>
  
  <p>One point of clarification is that sometimes folks may visit our site without having ever clicked a navigation item. I want the navigation items to still be highlighted based on the current subdirectory where a person is viewing content. This helps them easily identify where they are and how to get back if they navigate to other parts of the community. Also if a person does a global search and stumbles upon content in one of our 6 main areas, we want the nav menu to instantly identify their current location (based on url) and highlight that nav <code>.item</code> in our vertical nav bar.</p>
  
  <p>Is Javascript or Jquery the way to go? Any help would be appreciated!!</p>
  
  <p>Heres a <a href="https://jsfiddle.net/jord8on/98k14au0/" rel="nofollow noreferrer">FIDDLE</a> with all the code.</p>
  
  <p>sample CSS:</p>
  
  <pre><code>.navback {
    position: fixed;
    top: 0;
    left: 0px;
    width: 100px;
    height: 100%;
    background: #283237;
    z-index: 4;
  }
  
  .navbar {
    position: fixed;
    top: 44px;
    left: 0px;
    width: 100px;
    height: 60vh;
    background: #283237;
    display: flex;
    z-index: 5;
    flex-direction: column;
  }
  
  .topbar {
    border-top: 1px solid #000;
    top: 44px;
  }
  
  .navbar .item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-top: 40px;
    padding-bottom: 40px;
    max-height: 100px;
    z-index: 5;
  }
  
  .navbar .item div.label {
    color: #fff;
    position: relative;
    top: 5px;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Segoe UI", sans-serif;
    transition: all 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
    left: -100px;
  }
  </code></pre>
  
  <p>Sample HTML:</p>
  
  <pre><code> &lt;div class="topbar"&gt;&lt;/div&gt;
    &lt;div class="navback leftnav"&gt;
  &lt;div class="navbar"&gt;
    &lt;div class="item hvr-shrink"&gt;
      &lt;a href="https://community.canopytax.com/"&gt;
      &lt;div&gt;
          &lt;img src="https://png.icons8.com/ios/35/ffffff/home.png"/&gt;
        &lt;div class="label"&gt;Home&lt;/div&gt;
      &lt;/div&gt;
    &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="item hvr-shrink"&gt;
      &lt;a href="https://community.canopytax.com/community-central/"&gt;
      &lt;div&gt;
        &lt;img src="https://png.icons8.com/ios/40/ffffff/conference-call.png"&gt;
        &lt;div class="label"&gt;Central&lt;/div&gt;
      &lt;/div&gt;
    &lt;/a&gt;
    &lt;/div&gt;
  </code></pre>