<div class="form-group">
    <div class="dropdown">
        <button type="button" class="btn btn-indigo dropdown-toggle btn-ms ripple" data-toggle="dropdown">
            Menu
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="javascript:">Link 1</a>
            <a class="dropdown-item" href="javascript:">Link 2</a>
            <a class="dropdown-item" href="javascript:">Link 3</a>
        </div>
    </div>
</div>

Split button menu

View Code

<div class="form-group">
    <div class="btn-group">
        <button type="button" class="btn btn-ms btn-indigo ripple">Pineapple</button>
        <button type="button" class="btn btn-ms btn-indigo dropdown-toggle dropdown-toggle-split ripple"
                data-toggle="dropdown">
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="javascript:">Fruits</a>
            <a class="dropdown-item" href="javascript:">Vegetables</a>
        </div>
    </div>
</div>

Cars

Select Box

View Code

<div class="form-group">
    <div class="ms-select">
        <label class="floating-label">Cars</label>
        <select class="form-control" name="car">
            <option value="1">Audi</option>
            <option value="2">BMW</option>
            <option value="3">Dodge</option>
            <option value="4">Ferrari</option>
            <option value="5">koenigsegg</option>
            <option value="6">Lamborghini</option>
            <option value="7">Pagani</option>
        </select>
    </div>
</div>

Cars

With primary and accent colors

View Code

<div class="form-group">
    <div class="ms-select primary-blue accent-pink">
        <label class="floating-label">Cars</label>
        <select class="form-control" name="car">
            <option value="1">Audi</option>
            <option value="2">BMW</option>
            <option value="3">Dodge</option>
            <option value="4">Ferrari</option>
            <option value="5">koenigsegg</option>
            <option value="6">Lamborghini</option>
            <option value="7">Pagani</option>
        </select>
    </div>
</div>

Cars

Searchable

View Code

<div class="form-group">
    <div class="ms-select searchable primary-blue accent-pink">
        <label class="floating-label">Cars</label>
        <select class="form-control" name="car">
            <option value="1">Audi</option>
            <option value="2">BMW</option>
            <option value="3">Dodge</option>
            <option value="4">Ferrari</option>
            <option value="5">koenigsegg</option>
            <option value="6">Lamborghini</option>
            <option value="7">Pagani</option>
        </select>
    </div>
</div>

Cars

With left to right animation

View Code

<div class="form-group">
    <div class="ms-select searchable primary-blue accent-pink animate-left">
        <label class="floating-label">Cars</label>
        <select class="form-control" name="car">
            <option value="1">Audi</option>
            <option value="2">BMW</option>
            <option value="3">Dodge</option>
            <option value="4">Ferrari</option>
            <option value="5">koenigsegg</option>
            <option value="6">Lamborghini</option>
            <option value="7">Pagani</option>
        </select>
    </div>
</div>

Cars

With right to left animation

View Code

<div class="form-group">
    <div class="ms-select searchable primary-blue accent-pink animate-right">
        <label class="floating-label">Cars</label>
        <select class="form-control" name="car">
            <option value="1">Audi</option>
            <option value="2">BMW</option>
            <option value="3">Dodge</option>
            <option value="4">Ferrari</option>
            <option value="5">koenigsegg</option>
            <option value="6">Lamborghini</option>
            <option value="7">Pagani</option>
        </select>
    </div>
</div>

Cars

Multi Select

View Code

<div class="form-group">
    <div class="ms-select searchable multi-select accent-pink primary-blue-600">
        <label class="floating-label">Cars</label>
        <select class="form-control" name="cars[]" multiple>
            <option value="1">Audi</option>
            <option value="2">BMW</option>
            <option value="3" selected>Dodge</option>
            <option value="4">Ferrari</option>
            <option value="5" selected>koenigsegg</option>
            <option value="6">Lamborghini</option>
            <option value="7">Pagani</option>
        </select>
    </div>
</div>

Menu

On this page