Navs
Add .nav class to list element to convert it into a navigation menu. .active, .heading, .divider classes can be used on li tags.
<div class="scroll-x">
<ul class="nav">
<li class="active"><a href="#">Active</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li class="heading">Heading</li>
<li><a href="#">Other link 1</a></li>
<li><a href="#">Other link 2</a></li>
<li class="divider"></li>
<li><a href="#">Separated link 1</a></li>
<li><a href="#">Separated link 2</a></li>
</ul>
</div>Horizontal
Add .horizontal class to a nav to make it horizontal. Wrap the entire nav inside a .scroll-x element to make it horizontally scrollable on smaller screens. .divider class is not supported.
- Active
- Link 1
- Link 2
- Heading
- Other link 1
- Other link 2
<div class="scroll-x">
<ul class="horizontal nav">
<li class="active"><a href="#">Active</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li class="heading">Heading</li>
<li><a href="#">Other link 1</a></li>
<li><a href="#">Other link 2</a></li></ul>
</div>Justified
Add .justified class to have equally sized links in nav. Wrap the entire nav inside a .scroll-x element to make it horizontally scrollable on smaller screens. .divider class is not supported.
- Active
- Link 1
- Link 2
- Heading
- Other link 1
- Other link 2
<div class="scroll-x">
<ul class="justified nav">
<li class="active"><a href="#">Active</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li class="heading">Heading</li>
<li><a href="#">Other link 1</a></li>
<li><a href="#">Other link 2</a></li></ul>
</div>