Navbar

<nav role="navigation" class="zust-navbar">

  <!-- This is header, it includes button to expand nav, brand logo and brand title -->
  <div class="zust-header">
    <img src="/resources/zusty.svg">
    <span>Zusty CSS</span>
    <button class="zust-btn zust-transparent zust-menu-btn">
      <span class="zust-icon">
        <i class="zust-menu"></i>
      </span>
    </button>
  </div>

  <!-- Content includes options and action buttons -->
  <div class="zust-content">

    <!-- This is option. Each <a></a> is a option -->
    <div class="zust-options">
      <a href="#!">Get Started</a>
      <a href="#!">Download</a>
      <a href="#!">About</a>
    </div>

    <!-- Put all action buttons here -->
    <div class="zust-actions">
      <button class="zust-btn zust-transparent">Support</button>
      <button class="zust-btn zust-primary">Join Beta</button>
    </div>
  </div>
</nav>

<nav role="navigation" class="zust-navbar">

  <!-- This is header, it includes button to expand nav, brand logo and brand title -->
  <div class="zust-header">
    <img src="/resources/zusty.svg">
    <span>Zusty CSS</span>
    <button class="zust-btn zust-transparent zust-menu-btn">
      <span class="zust-icon">
        <i class="zust-menu"></i>
      </span>
    </button>
  </div>

  <!-- Content includes options and action buttons -->
  <div class="zust-content">

    <!-- This is option. Each <a></a> is a option -->
    <div class="zust-options">
      <a href="#!">Get Started</a>
      <a href="#!">Download</a>
      <a href="#!">About</a>
    </div>

    <!-- Put all action buttons here -->
    <div class="zust-actions">
      <button class="zust-btn zust-transparent">Support</button>
      <button class="zust-btn zust-primary">Join Beta</button>
    </div>
  </div>
</nav>

<script>
  document.querySelectorAll('.zust-menu-btn').forEach((btn) => {
    btn.addEventListener('click', ()) => {
      // Check if the navbar is expanded
      if (!btn.closest('.zust-navbar').classList.contains('zust-expanded')) {
        // if the navbar is not expanded, make it expanded and toggle the icon
        btn.closest('.zust-navbar').classList.add('zust-expanded');
        btn.querySelector('.zust-icon i').classList.replace('zust-menu', 'zust-close');
      } else {
        // if the navbar is expanded, close the navbar and toggle the icon
        btn.closest('.zust-navbar').classList.remove('zust-expanded');
        btn.querySelector('.zust-icon i').classList.replace('zust-close', 'zust-menu');
      }
    });
  });
</script>

<nav role="navigation" class="zust-navbar">

  <!-- This is header, it includes button to expand nav, brand logo and brand title -->
  <div class="zust-header">
    <img src="/resources/zusty.svg">
    <span>Zusty CSS</span>
    <button class="zust-btn zust-transparent zust-menu-btn">
      <span class="zust-icon">
        <i class="zust-menu"></i>
      </span>
    </button>
  </div>

  <!-- Content includes options and action buttons -->
  <div class="zust-content">

    <!-- This is option. Each <a></a> is a option -->
    <div class="zust-options">
      <a href="#!">Get Started</a>
      <a href="#!">Download</a>
      <a href="#!">About</a>

      <!-- You can also include Dropdowns -->
      <div class="zust-dropdown">
        <button class="zust-btn">More</button>
        <ul class="zust-items">
          <li>Report Bug</li>
          <li>New Features</li>
        </ul>
      </div>
    </div>

    <!-- Put all action buttons here -->
    <div class="zust-actions">
      <button class="zust-btn zust-transparent">Support</button>
      <button class="zust-btn zust-primary">Join Beta</button>
    </div>
  </div>
</nav>

<nav role="navigation" class="zust-navbar zust-flat">
  <div class="zust-header">
    <img src="/resources/zusty.svg">
    <span>Zusty CSS</span>
    <button class="zust-btn zust-transparent zust-menu-btn">
      <span class="zust-icon">
        <i class="zust-menu"></i>
      </span>
    </button>
  </div>

  <div class="zust-content">
    <div class="zust-options">
      <a href="#!">Get Started</a>
      <a href="#!">Download</a>
      <a href="#!">About</a>
    </div>

    <div class="zust-actions">
      <button class="zust-btn zust-transparent">Support</button>
      <button class="zust-btn zust-primary">Join Beta</button>
    </div>
  </div>
</nav>

<nav role="navigation" class="zust-navbar zust-right-aligned">
  <div class="zust-header">
    <img src="/resources/zusty.svg">
    <span>Zusty CSS</span>
    <button class="zust-btn zust-transparent zust-menu-btn">
      <span class="zust-icon">
        <i class="zust-menu"></i>
      </span>
    </button>
  </div>

  <div class="zust-content">
    <div class="zust-options">
      <a href="#!">Get Started</a>
      <a href="#!">Download</a>
      <a href="#!">About</a>
    </div>
  </div>
</nav>