title: How to highlight active menu item in navbar after page is re-loaded
body: <p>Bootstrap 3 navbar menu is defined using code below.
  If item is selected from menu, new page is loaded from server. Same bootstrap menu appears in every page.
  However dropdown which is not used to select menu, is not highlighted.</p>
  
  <p>How to force bootstrat to higlight last selected menu item automatically if local storage is allowed: store last selected item in local storage. If new page is loaded, get last clicked menu item name and highlight it by addding <code>active</code> class into it.</p>
  
  <p>Doint it in server reqiures changing generated menu by adding active class to proper item dynamically.
  How to implement this without such change ? 
  ASP.NET MVC4 is used in server side. Maybe jquery+localstorage in browser or some simple ASP.NET MVC4 solution is available.</p>
  
  <pre><code>&lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href='#' class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown 1&lt;/a&gt;
            &lt;ul class="dropdown-menu" role="menu"&gt;
              &lt;li&gt;&lt;a href='somepage'&gt;Action11&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href='somepage'&gt;Action12&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href='somepage'&gt;Action13&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
  
          &lt;li class="dropdown"&gt;
            &lt;a class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown 2&lt;/a&gt;
            &lt;ul class="dropdown-menu" role="menu"&gt;
              &lt;li&gt;&lt;a href='somepage'&gt;Action121&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href='somepage'&gt;Action122&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href='somepage'&gt;Action123&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
    &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>Menu contains dropdowns with query parameters as show below.
  In this case in code in Alexander Solonik answer _str value is <code>#</code> always and
  urlpath is always DoklstlG 
  So nothing is highlighted. How to fix ?</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-static-top"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                  &lt;span class="sr-only"&gt;Toggle&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav" id="menu"&gt;
                  &lt;li class='dropdown'&gt;
  &lt;a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button'&gt;Pad1
  &lt;/a&gt;
  &lt;ul class='dropdown-menu' role='menu'&gt;
  
  &lt;li&gt;&lt;a href='/admin/?_user=admin&amp;_company=1'&gt;Bar1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a id='menu_DoklstlG' tabindex='-1' entity='DoklstlG' href='/admin/Grid/Index/DoklstlG?_user=admin&amp;_company=1' title='Ctrl+E'&gt;Option1&lt;/a&gt;&lt;/li&gt;
  
  &lt;li&gt;&lt;a id='menu_DoklstlO' tabindex='-1' entity='DoklstlO' href='/admin/Grid/Index/DoklstlO?_user=admin&amp;_company=1'&gt;Ostuarve&lt;/a&gt;
  
  ...
  </code></pre>