NAVBAR

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>