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:
<div class="dropdown blog-topic-menu"> <button class="btn btn-default dropdown-toggle blog-topic-title underline" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li class="blog-topic-menu-item first-item" title="All Posts"> <a href="/blog" data-drupal-link-system-path="blog"><i class="fas fa-fw fa-list"></i> All Posts</a> </li> <li class="blog-topic-menu-item" title="Life"> <a href="/blog/life" data-drupal-link-system-path="blog/life" class="is-active"><i class="fas fa-fw fa-user"></i> Life</a> </li> <li class="blog-topic-menu-item" title="Frosty"> <a href="/blog/frosty" data-drupal-link-system-path="blog/frosty"><i class="fas fa-fw fa-cat-space"></i> Frosty</a> </li> [...] </ul> </div>
$('.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".