Flexible, responsive basic 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>
All header items are contained inside of zust-header. zust-menu-btn is button which will show up only on until-large breakpoint, you can use it to trigger the navbar to expanded.
zust-content contains rest of navbar parts. zust-options contains all options as a element. zust-actions contains all action buttons. zust-content changes layout on until-large breakpoint.
You've to add the JavaScript by yourself. Add class zust-expanded to zust-navbar expand the Navbar (only for until-large breakpoint). Add class zust-selected or attribute selected to any of zust-option child to set the item selected.
Here's a snippet to expand navbar with JavaScript.
<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>
You can even include Dropdown in navbar. Just add it to zust-options.
<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>
A navbar can be flat. Add class zust-flat for flat navbar.
<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>
A navbar can be right aligned, just add class zust-right-aligned to zust-navbar
<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>