Everything you can do with Beauter

List Navigation

<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>

Top Navbar


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="myTopnav">
  <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>
<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="myFunction()">☰</a>

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the -icon */
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";


  • New 'Examples' section coming with wonderful tutorials!
  • Adding animations and transitions effects soon.
  • 0.3 development started. Join us here.

Get Involved

Your contribution can make beauter more beautiful. Visit Github to collaborate.

Star Fork

Sitemap Designed with by Shubham Ramdeo
Follow @ramdeoshubham
outboxcraft logoOutboxcraft
© 2017