Swavy UI navbar is used to navigate through pages of a website
<nav class="sw_navbar">
<div class="sw_navbar-left">
<a href="#" class="sw_navbar-brand">Swavy UI Navbar</a>
</div>
<button class="sw_navbar-mobile-toggler sw_menu-icon" data-toggle="navbar" data-toggle-icon="false" data-mobile="horizontal"></button>
<div class="sw_navbar-widget">
<ul class="sw_navbar-center">
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link1</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link2</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link3</a></li>
</ul>
<ul class="sw_navbar-right">
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link1</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link2</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link3</a></li>
</ul>
</div>
</nav>
<nav class="sw_navbar sw_navbar-large bg-autumn_orange sw_mt-4 st-white">
<div class="sw_navbar-left">
<a href="#" class="sw_navbar-brand st-white">Swavy UI Navbar</a>
</div>
<button class="sw_navbar-mobile-toggler bg-none st-white" data-toggle="navbar" data-toggle-icon="true" data-mobile="horizontal">
<i class="fa-solid fa-bars-staggered"></i>
<i class="fa-solid fa-xmark menu_close sw_ds-none" data-close="navbar"></i>
</button>
<div class="sw_navbar-widget">
<div class="sw_navbar-center">
<form action="">
<input type="text" class="sw_form-input bg-white sw_rsq-1" />
<button class="sw_btn bg-white sw_rsq-1 st-autumn_orange sw_ml-2">
<i class="fa-solid fa-search"></i>
</button>
</form>
</div>
<ul class="sw_navbar-right">
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link st-white">Link1</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link st-white">Link2</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link st-white">Link3</a></li>
</ul>
</div>
</nav>
<nav class="sw_navbar sw_navbar-small sw_mt-4">
<div class="sw_navbar-left">
<a href="#" class="sw_navbar-brand">Swift Navbar</a>
</div>
<button class="sw_navbar-mobile-toggler sw_menu-icon" data-toggle="navbar" data-toggle-icon="false" data-mobile="vertical" data-target="#mobile-nav1"></button>
<div class="sw_navbar-widget">
<ul class="sw_navbar-center">
<li class="sw_navbar-menu sw_dropdown">
<a href="javascript:void(0);" class="sw_navbar-link sw_dropdown-trigger">Link1</a>
<ul class="sw_dropdown-content sw_rsq-1 bg-white">
<li><a href="" class="sw_dropdown-menu">Navbar Dropdown1</a></li>
<li><a href="" class="sw_dropdown-menu">Navbar Dropdown2</a></li>
<li><a href="" class="sw_dropdown-menu">Navbar Dropdown3</a></li>
<li><div class="sw_dropdown-divider"></div></li>
<li><a href="" class="sw_dropdown-menu">Navbar Dropdown4</a></li>
</ul>
</li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link2</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link3</a></li>
</ul>
<ul class="sw_navbar-right">
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link1</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link2</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link3</a></li>
</ul>
</div>
</nav>
<div class="sw_navbar-mobile-vertical bg-avocado_green" id="mobile-nav1">
<div class="sw_navbar-mobile-widget">
<ul class="sw_navbar-mobile-center">
<li class="sw_navbar-menu sw_dropdown">
<a href="javascript:void(0);" class="sw_navbar-link sw_dropdown-trigger">Link1</a>
<ul class="sw_dropdown-content sw_rsq-1 bg-white">
<li><a href="" class="sw_dropdown-menu">Navbar Dropdown1</a></li>
<li><a href="" class="sw_dropdown-menu">Navbar Dropdown2</a></li>
<li><a href="" class="sw_dropdown-menu">Navbar Dropdown3</a></li>
<li><div class="sw_dropdown-divider"></div></li>
<li><a href="" class="sw_dropdown-menu">Navbar Dropdown4</a></li>
</ul>
</li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link2</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link3</a></li>
</ul>
<ul class="sw_navbar-mobile-right">
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link1</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link2</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link3</a></li>
</ul>
</div>
</div>
<nav class="sw_navbar sw_navbar-larger bg-burlywood st-white sw_mt-4">
<div class="sw_navbar-left">
<a href="#" class="sw_navbar-brand">Swavy UI Navbar</a>
</div>
<button class="sw_navbar-mobile-toggler sw_menu-icon" data-toggle="navbar" data-toggle-icon="true" data-mobile="vertical" data-target="#mobile-nav2"></button>
<div class="sw_navbar-widget">
<ul class="sw_navbar-center">
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link1</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link2</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link3</a></li>
</ul>
<ul class="sw_navbar-right">
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link1</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link2</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link3</a></li>
</ul>
</div>
</nav>
<div class="sw_navbar-mobile-vertical" id="mobile-nav2">
<div class="sw_navbar-mobile-widget">
<ul class="sw_navbar-mobile-center">
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link1</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link2</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link3</a></li>
</ul>
<ul class="sw_navbar-mobile-right">
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link1</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link2</a></li>
<li class="sw_navbar-menu"><a href="#" class="sw_navbar-link">Link3</a></li>
</ul>
</div>
</div>
Support us to contribute to the continuous development of Swavy UI and other open source software.
SPONSOR