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

 
Sean Reiser

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".