title: Metro UI CSS: How to achieve class="active" effect?
body: <p>In bootstrap there is a nice css class 'active' to apply to menu elements to indicate on which page a user is.</p>
  
  <p>I assume it will work the same in metro ui but I was wrong</p>
  
  <pre><code>&lt;ul class="app-bar-menu" data-bind="foreach: router.navigationModel"&gt;
     &lt;li data-bind="css: { active: isActive }"&gt;
        &lt;a data-bind="attr: { href: hash }, text: title"&gt;&lt;/a&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The above code (uses Durandal's router) does not make menu items stand out, even if I explicitly set the class without these bindings.</p>
  
  <p>Is there a similiar mechanism in Metro UI CSS for appbar or horizontal menu?
  If not, how can I achieve it?</p>
  
  <p><strong>EDIT</strong>
  I found out that class="active" successfully works with lower level menu items but what about the top level? </p>