How to Use CSS Naming Rules Basic Styles Components
Elements
Button Input Radio&Checkbox On-off Select Datetimepicker Dropdown
Layout
Grid Form
Data Display
Tab Table Pagination Badge Process
Feedback
Dialog Message Tooltip PopConfirm Loader
Other
Breadcrumb SideNav
I18N

Dropdown

Basic

Use.z-dropdownas the wrapper element.

Add class name.z-dropdown-triggeron the trigger element.

Note: If the trigger element is not a<button>, tabindex="0"is required to enable the keyboard operations.


MENU 1 MENU 2 Disabled 

    <div class="z-dropdown">
        <button class="z-btn primary z-dropdown" >    
            Dropdown
            <i class="fa fa-caret-down"></i>
        </button>
        <div class="z-dropdown-menu">
            <a class="z-menu-item">MENU 1</a>
            <a class="z-menu-item">MENU 2</a>
            <a class="z-menu-item disabled">Disabled</a>
        </div>
    </div>

Icon And Image

Dropdown
MENU 1 MENU 2
MENU 3
        
MENU 1 MENU 2 MENU 3 

    <div class="z-dropdown">
        <span class="z-dropdown-trigger" tabindex="0">
            Dropdown
            <i class="fa fa-caret-down"></i>
        </span>
        <div class="z-dropdown-menu">
            <a class="z-menu-item">
                <i class="fa fa-bank"></i>MENU 1
            </a class="z-menu-item">
            <a class="z-menu-item disabled">
                <i class="fa fa-envelope"></i>MENU 2
            </a>
            <div class="z-dropdown-divider"></div>
            <a class="z-menu-item">
                <i class="fa fa-phone"></i>MENU 3
            </a>
        </div>
    </div>

    <div class="z-dropdown">
        <button class="z-btn-outline primary z-dropdown-trigger">
            Dropdown
            <i class="fa fa-caret-down"></i>
        </button>
        <div class="z-dropdown-menu">
            <a class="z-menu-item">
                <img src="./img/qq.jpg">MENU 1
            </a class="z-menu-item">
            <a class="z-menu-item disabled">
                <img src="./img/phone.png">MENU 2
            </a>
            <a class="z-menu-item">
                <img src="./img/film.jpg">MENU 3
            </a>
        </div>
    </div>

Sub Menu

MENU 1 MENU 2
MENU 3
ONE TWO THREE 

    <div class="z-dropdown">
        <button class="z-btn primary z-dropdown" >
            Dropdown
            <i class="fa fa-caret-down"></i>
        </button>
        <div class="z-dropdown-menu">
            <a class="z-menu-item">MENU 1</a>
            <a class="z-menu-item">MENU 2</a>
            <div class="z-menu-head">
                MENU 3
                <div class="z-sub-menu">
                    <a class="z-menu-item">ONE</a>
                    <a class="z-menu-item">TWO</a>
                    <a class="z-menu-item">THREE</a>
                </div>
            </div>
        </div>
    </div>

Grouping

Dropdown
US
New York Washington
China
Beijing Shanhai Shenzhen 

    <div class="z-dropdown">
        <span class="z-dropdown-trigger" tabindex="0">
            Dropdown
            <i class="fa fa-caret-down"></i>
        </span>
        <div class="z-dropdown-menu">
            <div class="z-menu-label">US</div>
            <a class="z-menu-item">New York</a>
            <a class="z-menu-item">Washington</a>
            <div class="z-dropdown-divider"></div>
            <div class="z-menu-label">China</div>
            <a class="z-menu-item">Beijing</a>
            <a class="z-menu-item">Shanhai</a>
            <a class="z-menu-item">Shenzhen</a>
        </div>
    </div>

Direction

top-right
ONE
ONE TWO THREE
TWO THREE
top-left
ONE
TWO
ONE TWO THREE
THREE
bottom-left
ONE TWO
THREE
ONE TWO THREE 

    <div class="z-dropdown">
        <span class="z-dropdown-trigger" tabindex="0">top-right</span>
        <div class="z-dropdown-menu top-right">
            ...
        </div>
    </div>

    <div class="z-dropdown">
        <span class="z-dropdown-trigger" tabindex="0">top-left</span>
        <div class="z-dropdown-menu top-left">
            ...
        </div>
    </div>  

    <div class="z-dropdown">
        <span class="z-dropdown-trigger" tabindex="0">bottom-left</span>
        <div class="z-dropdown-menu bottom-left">
            ...
        </div>
    </div>

Javascript

Normally you don't need to initialize dropdown manually.

If dropdown is created dynamicly, you need to initialize it yourself.

    $('#some-trigger').dropdown();