DROPDOWN

Swavy UI dropdown is used for toggling hidden menu within the webpage. It can be used in a button, anchor tag or list element

DEFAULT DROPDOWN

To add rounded corners to Swavy UI dropdown content, add sw_rsq-2 to the class attribute of the dropdown content element. You can set the depth of the rounded corners ranging from 1 - 8

To set background color for Swavy UI dropdown, you can use any color from the color spectrum, for example, add bg-canary_yellow to the class attribute of the dropdown content element to add background color of canary yellow

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita sit, molestiae quos exercitationem architecto totam quo eum sapiente laboriosam. Blanditiis doloribus suscipit aspernatur odit. Quis voluptatibus accusantium quam vero explicabo!

                    
<div class="sw_dropdown">
    <button class="sw_btn sw_btn-large sw_dropdown-trigger">Dropdown with small content</button>
    <div class="sw_dropdown-content sw_dropdown-content-small bg-white sw_rsq-2">
        <span class="sw_dropdown-menu sw_dropdown-header">Dropdown Header</span>
        <div class="sw_dropdown-divider"></div>
        <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-user'></i> Dropdown Menu1</a>
        <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-share-alt'></i> Dropdown Menu2</a>
        <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-power-off'></i> Dropdown Menu3</a>
        <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-shopping-bag'></i> Dropdown Menu4</a>
    </div>
</div>

<div class="sw_dropdown">
    <button class="sw_btn sw_dropdown-trigger bg-bisque">Dropdown with normal content</button>
    <div class="sw_dropdown-content sw_rsq-2">
        <span class="sw_dropdown-menu sw_dropdown-header">Dropdown Header</span>
        <div class="sw_dropdown-divider"></div>
        <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-user'></i> Dropdown Menu1</a>
        <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-share-alt'></i> Dropdown Menu2</a>
        <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-power-off'></i> Dropdown Menu3</a>
        <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-shopping-bag'></i> Dropdown Menu4</a>
    </div>
</div>

<div class="sw_dropdown">
    <button class="sw_btn sw_dropdown-trigger">Dropdown with large content</button>
    <div class="sw_dropdown-content sw_dropdown-content-large sw_rsq-2 bg-pink">
        <span class="sw_dropdown-menu sw_dropdown-header">Dropdown Header</span>
        <div class="sw_dropdown-divider"></div>
        <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-user'></i> Dropdown Menu1</a>
        <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-share-alt'></i> Dropdown Menu2</a>
        <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-power-off'></i> Dropdown Menu3</a>
        <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-shopping-bag'></i> Dropdown Menu4</a>
    </div>
</div>

<div class="sw_dropdown">
    <button class="sw_btn sw_dropdown-trigger bg-red st-white">Dropdown with larger content</button>
    <div class="sw_dropdown-content sw_dropdown-content-larger sw_rsq-2">
        <span class="sw_dropdown-menu sw_dropdown-header">Dropdown Header</span>
        <div class="sw_dropdown-divider"></div>
        <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-user'></i> Dropdown Menu1</a>
        <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-share-alt'></i> Dropdown Menu2</a>
        <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-power-off'></i> Dropdown Menu3</a>
        <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-shopping-bag'></i> Dropdown Menu4</a>
    </div>
</div>

<div class="sw_dropdown sw_dropdown-mega sw_mt-3">
    <button class="sw_btn sw_dropdown-trigger bg-honeydew">Mega Dropdown</button>

    <div class="sw_dropdown-content">
        <div class="sw_wrapper">
            <span class="sw_dropdown-menu sw_dropdown-header font_sw-3">Swavy UI Mega Dropdown</span>
            <div class="sw_dropdown-divider sw_mb-3"></div>
            <div class="sw_grid-row">
                <div class="sw_grid sw_grid-third">
                    <p class="font_xd-2 st_align-justify">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita sit,
                        molestiae quos exercitationem architecto totam quo eum sapiente laboriosam.
                        Blanditiis doloribus suscipit aspernatur odit. Quis voluptatibus accusantium quam vero explicabo!
                    </p>
                </div>
                <div class="sw_grid sw_grid-third">
                    <a href="javascript:void(0);" class="sw_dropdown-menu "><i class='bx bx-user'></i> Dropdown Menu1</a>
                    <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-share-alt'></i> Dropdown Menu2</a>
                    <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-power-off'></i> Dropdown Menu3</a>
                    <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-shopping-bag'></i> Dropdown Menu4</a>
                </div>

                <div class="sw_grid sw_grid-third">
                    <a href="javascript:void(0);" class="sw_dropdown-menu "><i class='bx bx-user'></i> Dropdown Menu1</a>
                    <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-share-alt'></i> Dropdown Menu2</a>
                    <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-power-off'></i> Dropdown Menu3</a>
                    <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-shopping-bag'></i> Dropdown Menu4</a>
                </div>

            </div>
        </div>
    </div>
</div>

DROPDOWN WITH SUBMENU

                    
<div class="sw_dropdown">
    <button class="sw_btn sw_dropdown-trigger">Dropdown with submenu</button>
    <div class="sw_dropdown-content">
        <span class="sw_dropdown-menu sw_dropdown-header">Dropdown Header</span>
        <div class="sw_dropdown-divider"></div>
        <a href="javascript:void(0);" class="sw_dropdown-menu sw_dropdown-submenu">
            <i class='bx bx-user'></i> Dropdown Menu1
        </a>
        <div class="sw_dropdown-submenu-content">
            <a href="javascript:void(0);" class="sw_dropdown-submenu-menu">Submenu1</a>
            <a href="javascript:void(0);" class="sw_dropdown-submenu-menu">Submenu2</a>
            <a href="javascript:void(0);" class="sw_dropdown-submenu-menu">Submenu3</a>
            <a href="javascript:void(0);" class="sw_dropdown-submenu-menu">Submenu4</a>
        </div>

        <a href="javascript:void(0);" class="sw_dropdown-menu sw_dropdown-submenu">
            <i class='bx bx-share-alt'></i> Dropdown Menu2
        </a>
        <div class="sw_dropdown-submenu-content">
            <a href="javascript:void(0);" class="sw_dropdown-submenu-menu">Submenu5</a>
            <a href="javascript:void(0);" class="sw_dropdown-submenu-menu">Submenu6</a>
            <a href="javascript:void(0);" class="sw_dropdown-submenu-menu">Submenu7</a>
            <a href="javascript:void(0);" class="sw_dropdown-submenu-menu">Submenu8</a>
        </div>
        <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-power-off'></i> Dropdown Menu3</a>
        <a href="javascript:void(0);" class="sw_dropdown-menu"><i class='bx bx-shopping-bag'></i> Dropdown Menu4</a>
    </div>
</div>