Start Here

Introduction

Download

Syntax

Core Concepts

Aspect Ratio

Border Radius

Border Size

Border Style

Cursor

Display

Flex

Flex Alignment

Flex Direction

Flex Grow

Flex Position

Flex Size

Flex Width

Font

Gap

Height

Margin

Padding

Spacing

Width

UI Effects

Animations

Single Box

Multi Box

3D Box

Other

Box Shadows

OutSet Shadow

InSet Shadow

Text Shadow

OutSet Shadow

InSet Shadow

UI Widgets

Accordion

Buttons

Calendar

Card

Checks & Radio

Data Tables

DropDown

DropDown Multi Select

Gallery

Pagination

Pop-Up

Progress Bar

Skeleton

Spinners

Suggestion

Tabs

Toasts

Slider

Text Boxes

Text Editor

Tool Tip

Icons

Theme Color Shade

Color Shade

Text Color

Background Color

Border Color

Gradient

Text Gradient

Single Color

Double Color

Triple Color

Background Gradient

Single Color

Double Color

Triple Color

Border Gradient

Single Color

Double Color

Triple Color

Other Pages

Landing Pages

Top Nav 1

Top Nav 2

Side Nav 1

Forget Password

Apps

Add Data

Nav First Level

Nav Second Level

Nav Third Level

N
A
V

Responsive & Customizable Drop Down

Seamless Navigation with Style

Dropdown menus are interactive navigation tools that allow users to explore multiple related options from a single menu item. By clicking or hovering over a menu, additional links or categories are revealed, helping to keep the website organized and user-friendly. Dropdowns are essential for websites with extensive content or products, as they provide seamless browsing and a clean layout.

Key Benefits:

Improved Navigation: Dropdowns simplify browsing by grouping related pages under one heading, reducing the need for users to scroll through cluttered menus.
Clean Design: They help maintain a minimalistic design, hiding additional options until needed, which enhances visual appeal and reduces cognitive load.
Mobile-Friendly: Dropdown menus work well with responsive designs, improving usability on mobile devices and tablets.
Highlight Important Areas: Dropdowns allow for the prioritization of key areas like products, services, or account settings, making them easy to find.

General DropDown

The dropdown component provides a list of selectable options triggered by a button. It's flexible, responsive, and supports different alignment styles (left, center, right).

Classes Used

DpDn:This is the container class for the entire dropdown component and wraps both the toggle button & the dropdown menu content.
DpDnLk:Represents individual links or options in the dropdown menu. Each link can be customized or styled as needed.
Button Element:This button is responsible for triggering the dropdown. When hovered, it will show or hide the dropdown content.

Setting Dropdown Position

DpDnBmLt: Dropdown Open Left Downwards side
DpDnBmCr: Dropdown Open Center Downwards side
DpDnBmRt: Dropdown Open Right Downwards side
DpDnBmLtOt: Dropdown Open Left Downwards Outside
DpDnBmRtOt: Dropdown Open Right Downwards Outside
DpDnTpLtOt: Dropdown Open Left Upwards Outside
DpDnTpRtOt: Dropdown Open Right Upwards Outside
DpDnTpLt: Dropdown Open Left Upwards side
DpDnTpCr: Dropdown Open Center Upwards side
DpDnTpRt: Dropdown Open Right Upwards side

Logout

Change Password

Change Email

Logout

Change Password

Change Email

Logout

Change Password

Change Email

Source Code


<div class="DyFx FxJyCtSeAd FxWp FxDnRw Wh100p Gp10 ">

    <div class="DpDn">
        <button class="Bn Br2 HrCrBe CrBrBe BdNe CrBe">Left</button>
        <div class="DpDnBmLt">
            <div class="DpDnLk"> <i class="CT-UserMSolid"></i> &nbsp; Logout</div>
            <div class="DpDnLk"><i class="CT-KeyRightSolid"></i> &nbsp; Change Password</div>
            <div class="DpDnLk"><i class="CT-Email"></i> &nbsp; Change Email</div>
        </div>
    </div>

    <div class="DpDn">
        <button class="Bn Br2 HrCrGn CrBrGn BdNe CrGn">Center</button>
        <div class="DpDnBmCr">
            <div class="DpDnLk"> <i class="CT-UserMSolid"></i> &nbsp; Logout</div>
            <div class="DpDnLk"><i class="CT-KeyRightSolid"></i> &nbsp; Change Password</div>
            <div class="DpDnLk"><i class="CT-Email"></i> &nbsp; Change Email</div>
        </div>
    </div>

    <div class="DpDn">
        <button class="Bn Br2 HrCrPe CrBrPe BdNe CrPe">Right</button>
        <div class="DpDnBmRt">
            <div class="DpDnLk"> <i class="CT-UserMSolid"></i> &nbsp; Logout</div>
            <div class="DpDnLk"><i class="CT-KeyRightSolid"></i> &nbsp; Change Password</div>
            <div class="DpDnLk"><i class="CT-Email"></i> &nbsp; Change Email</div>
        </div>
    </div>

</div>

Auto DropDown

Classes Used

DpDn:This is the container class for the entire dropdown component and wraps both the toggle button & the dropdown menu content.
DpDnLk:Represents individual links or options in the dropdown menu. Each link can be customized or styled as needed.
Button Element:This button is responsible for triggering the dropdown. When hovered, it will show or hide the dropdown content.

Note

Use class DpDnAo(DropDownAuto) to make the direction auto i.e. the dropdown will take space according to space availble on screen.

Option 1 Option 2 Option 3

Source Code


<div class="DpDnAo">
    <button class="dropdownBtn Pg10 CrBdGn70Lt CrWe Br0 CrurPr FtSe16 BrRs5p">Hover me</button>
    <div class="dropdownContent">
        <a href="#">Option 1</a>
        <a href="#">Option 2</a>
        <a href="#">Option 3</a>
    </div>
</div>

Auto DropDown

Classes Used

DpDn:This is the container class for the entire dropdown component and wraps both the toggle button & the dropdown menu content.
DpDnLk:Represents individual links or options in the dropdown menu. Each link can be customized or styled as needed.
Button Element:This button is responsible for triggering the dropdown. When hovered, it will show or hide the dropdown content.

Note

Use class DpDnAo(DropDownAuto) to make the direction auto i.e. the dropdown will take space according to space availble on screen.

Option 1 Option 2 Option 3

Source Code


<div class="DpDnAo">
    <button class="dropdownClickBtn Pg10 CrBdGn70Lt CrWe Br0 CrurPr FtSe16 BrRs5p">Click Me</button>
    <div class="dropdownContent">
        <a href="#">Option 1</a>
        <a href="#">Option 2</a>
        <a href="#">Option 3</a>
    </div>
</div>

Web Tool

Welcome Amit

Logout

Change Password

Change Email