SemanSemantic-UItic-UI/server/partials/examples/menu.html

<div class="ui vertical demo fluid menu">
  <a class="active item">
    A
  </a>
  <a class="item">
    B
  </a>
</div>
<div class="ui vertical demo fluid menu">
  <a class="active teal item">
    A
  </a>
  <a class="item">
    B
    <div class="ui label">1</div>
  </a>
  <div class="item">
  <div class="ui transparent icon input">
      <input type="text" placeholder="Search...">
      <i class="search icon"></i>
    </div>
  </div>
</div>
<div class="ui fluid tabular menu">
  <a class="active item">
    Tab
  </a>
  <a class="item">
    Tab
  </a>
</div>
<div class="ui secondary vertical demo fluid menu">
  <a class="active item">
    A
  </a>
  <a class="item">
    B
  </a>
  <a class="item">
    C
  </a>
</div>
<div class="ui secondary pointing vertical demo fluid menu">
  <a class="active item">
    A
  </a>
  <a class="item">
    B
  </a>
  <a class="item">
    C
  </a>
</div>

<script type="text/javascript">
$(document)
  .ready(function(){
    $('.demo.menu .item')
      .on('click', function() {
        if(!$(this).hasClass('dropdown')) {
          $(this)
            .addClass('active')
            .closest('.ui.menu')
            .find('.item')
              .not($(this))
              .removeClass('active')
          ;
        }
      })
    ;
  })
;
</script>