title: Semantic ui dropdown menu active item not updating
body: <p>I have a Semantic UI horizontal menu where one element is a dropdown item. The menu works fine, but if I select something from the dropdown menu, the last item that was active remains active, along with the dropdown selection.</p>
  
  <p>I.e. selecting A, B or C from the example below leaves 'First' as being active, rather than 'Third'. I think some javascript is required to change this behaviour (perhaps onclick?), but I can't quite get it to work.
  <a href="https://i.stack.imgur.com/NGh1T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NGh1T.png" alt="Screenshot of menu"></a></p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body style="min-height: 611px;"&gt;
    &lt;div class="ui center aligned container"&gt;
      &lt;div id="menu-kpjwspgiojoilrelsvrv" class="ui menu "&gt;
        &lt;a class="item active" data-tab="tab-lwmtuiwnyoqcdotdmugl"&gt;
          &lt;div&gt;First&lt;/div&gt;
        &lt;/a&gt;
        &lt;a class="item " data-tab="tab-rmdnlmdtoiyygingzyec"&gt;
          &lt;div&gt;Second&lt;/div&gt;
        &lt;/a&gt;
        &lt;div class="ui pointing dropdown link item"&gt;
          &lt;span class="text"&gt;Third&lt;/span&gt;
          &lt;i class="dropdown icon"&gt;&lt;/i&gt;
          &lt;div class="ui menu "&gt;
            &lt;a class="item" data-tab="tab-ygxtebqhvtdlosqlgwbh"&gt;
              &lt;div&gt;A&lt;/div&gt;
            &lt;/a&gt;
            &lt;a class="item" data-tab="tab-fzpzmnrxwpbyveyxpgva"&gt;
              &lt;div&gt;B&lt;/div&gt;
            &lt;/a&gt;
            &lt;a class="item" data-tab="tab-tonyqvwtiukfnvnpehyr"&gt;
              &lt;div&gt;C&lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="menu-kpjwspgiojoilrelsvrv" class="right menu"&gt;
          &lt;a class="item " data-tab="tab-jgophjlxfwrpdkzribht"&gt;
            &lt;div&gt;Log out&lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ui tab bottom tab segment active" data-tab="tab-lwmtuiwnyoqcdotdmugl"&gt;&lt;/div&gt;
      &lt;div class="ui tab bottom tab segment " data-tab="tab-rmdnlmdtoiyygingzyec"&gt;&lt;/div&gt;
      &lt;div class="ui tab bottom tab segment" data-tab="tab-ygxtebqhvtdlosqlgwbh"&gt;&lt;/div&gt;
      &lt;div class="ui tab bottom tab segment" data-tab="tab-fzpzmnrxwpbyveyxpgva"&gt;&lt;/div&gt;
      &lt;div class="ui tab bottom tab segment" data-tab="tab-tonyqvwtiukfnvnpehyr"&gt;&lt;/div&gt;
      &lt;div class="ui tab bottom tab segment " data-tab="tab-jgophjlxfwrpdkzribht"&gt;&lt;/div&gt;
      &lt;script&gt;$('.ui.pointing.dropdown.link.item').dropdown({action: 'select'});&lt;/script&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The code above does not work quite as expected, as I am developing in an R Shiny environment and therefore missing a js or stylesheet that is loaded locally.</p>
  
  <p>Bonus question: how can I change the Log out item to perform the following command (sending it to a parent iframe):</p>
  
  <pre><code>window.top.location.href = 'https://example.com/logout'
  </code></pre>
  
  <p>If it was a button, I could do: </p>
  
  <pre><code>&lt;a class='ui button' onclick ="window.top.location.href = 'https://example.com/logout';"&gt;Log out&lt;/a&gt;
  </code></pre>
  
  <p>but I'm not sure how to fit this into a menu.</p>