Setting the Title of a Bootstrap 3 Dropdown to the Active Menu Item

 
Sean Reiser
Blog Coding / Drupal / Technology

Setting the Title of a Bootstrap 3 Dropdown to the Active Menu Item

So, I have a dropdown menu on my blog page and I wanted to have the title of the menu be the link to the current page.  I'm using a standard bootstrap3 dropdown for the menu.  Since this is a Drupal 8 site, drupal thankfully adds a class of is-active to the active a tag.  The following code is chunked out:

  1. <div class="dropdown blog-topic-menu">
  2.     <button class="btn btn-default dropdown-toggle blog-topic-title underline" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  3.         &nbsp;
  4.     </button>
  5.     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  6.         <li class="blog-topic-menu-item first-item" title="All Posts">
  7.             <a href="/blog" data-drupal-link-system-path="blog"><i class="fas fa-fw fa-list"></i> All Posts</a>
  8.         </li>
  9.  
  10.         <li class="blog-topic-menu-item" title="Life">
  11.             <a href="/blog/life" data-drupal-link-system-path="blog/life" class="is-active"><i class="fas fa-fw fa-user"></i> Life</a>
  12.         </li>
  13.  
  14.         <li class="blog-topic-menu-item" title="Frosty">
  15.             <a href="/blog/frosty" data-drupal-link-system-path="blog/frosty"><i class="fas fa-fw fa-cat-space"></i> Frosty</a>
  16.         </li>
  17.  
  18.         [...]
  19.  
  20.      </ul>
  21. </div>

In order to swap out the title I added the following Js 
  1. $('.dropdown BUTTON.blog-topic-title').html($('.dropdown a.is-active').html() + ' <span class="caret"></span>');

When you go to /blog/life, the menu title is replaced by "Life".