Everything you can do with Beauter
listnav
<ul class="listnav" >
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Contact</a></li>
</ul>
topnav
You can add a responsive top navbar which contracts and expands as per the width of the screen. Resize the window and see. It also contains different styles for different kinds of options available ads a menu. Also a Dropdown is there for more options.
<ul class="topnav" id="myTopnav2">
<li><a href="#beauter" class="brand">Brand</a></li>
<li><a href="#" class="active">Active</a></li>
<li class="dropdown">
<a href="#">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>
</li>
<li><a href="#">Link</a></li>
<li><a href="#" class="disabled">Disabled</a></li>
<li style="float:right;"><a href="#" >Right</a></li>
<li class="-icon">
<a href="javascript:void(0);" onclick="topnav('myTopnav2')">☰</a>
</li>
</ul>