<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
- <h1>Active Menu</h1>
+ <h1>Active Menu (is-active)</h1>
<div class="example">
<ul class="menu">
<li><a href="#">Four</a></li>
</ul>
</div>
+
+ <h1>Active Menu (active)</h1>
+
+ <div class="example">
+ <ul class="menu">
+ <li><a href="#">One</a></li>
+ <li class="active"><a href="#">Two (.active)</a></li>
+ <li><a href="#">Three</a></li>
+ <li><a href="#">Four</a></li>
+ </ul>
+ </div>
</div>
</div>
</div>
<body>
<div class="row">
<div class="column">
- <h1>Active Menu</h1>
+ <h1>Active Menu (is-active)</h1>
<div class="example">
<ul class="menu">
<li><a href="#">Four</a></li>
</ul>
</div>
+
+ <h1>Active Menu (active)</h1>
+
+ <div class="example">
+ <ul class="menu">
+ <li><a href="#">One</a></li>
+ <li class="active"><a href="#">Two (.active)</a></li>
+ <li><a href="#">Three</a></li>
+ <li><a href="#">Four</a></li>
+ </ul>
+ </div>
</div>
</div>