# Boomerang UI Kit

## Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

Open Bootstrap Docs

### Example

    <div class="dropdown">
        <button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-danger">Split button</button>
        <button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </div>
    <div class="dropdown">
        <button class="btn btn-outline-primary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fas fa-ellipsis-h"></i>
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>

### Variations

    <!-- User account -->
    <div class="dropdown">
        <button class="btn btn-primary btn-icon-only rounded-circle" type="button" id="dropdown_user_account" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="btn-inner--icon">
            	<i class="fas fa-user"></i>
            </span>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdown_user_account">
        	<h6 class="dropdown-header">User menu</h6>
        	<a class="dropdown-item" href="#">
        		<span class="float-right badge badge-primary">4</span>
        		<i class="fas fa-envelope text-primary"></i>Messages
        	</a>
        	<a class="dropdown-item" href="#">
        		<i class="fas fa-cog text-primary"></i>Settings
        	</a>
        	<div class="dropdown-divider" role="presentation"></div>
        	<a class="dropdown-item" href="#">
        		<i class="fas fa-sign-out-alt text-primary"></i>Sign out
        	</a>
        </div>
    </div>
    <!-- Notifications -->
    <div class="dropdown">
        <button class="btn btn-secondary btn-icon dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="btn-inner--icon">
            	<i class="fas fa-bell"></i>
            </span>
            <span class="btn-inner--text">Notifications</span>
        </button>
        <div class="dropdown-menu dropdown-menu-xl py-0">
            <div class="py-3 px-3">
            	<h5 class="heading h6 mb-0">Notifications</h5>
            </div>
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                    <div class="list-group-img">
                        <span class="avatar bg-purple">JD</span>
                    </div>
                    <div class="list-group-content">
                        <div class="list-group-heading">Johnyy Depp <small>10:05 PM</small></div>
                        <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                    </div>
                </a>
            	<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                    <div class="list-group-img">
                        <span class="avatar bg-pink">TC</span>
                    </div>
                    <div class="list-group-content">
                        <div class="list-group-heading">Tom Cruise <small>11:30 PM</small></div>
                        <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                    </div>
                </a>
                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                    <div class="list-group-img">
                        <span class="avatar bg-blue">WS</span>
                    </div>
                    <div class="list-group-content">
                        <div class="list-group-heading">Will Smith <small>15:45 PM</small></div>
                        <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                    </div>
                </a>
            </div>
            <div class="py-3 text-center">
            	<a href="#" class="link link-sm link--style-3">View all notifications</a>
            </div>
        </div>
    </div>
    <!-- Inverse dropdown -->
    <div class="dropdown">
    	<button class="btn btn-dark dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Inverse dropdown</button>
    	<div class="dropdown-menu dropdown-menu-inverse">
    		<a class="dropdown-item" href="#">Action</a>
    		<a class="dropdown-item" href="#">Another action</a>
    		<a class="dropdown-item" href="#">Something else here</a>
    	</div>
    </div>

### Sizing

    <!-- Large dropdown -->
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdown_large" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Large dropdown
        </button>
        <div class="dropdown-menu dropdown-menu-lg" aria-labelledby="dropdown_large">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
    <!-- Small dropdown -->
    <div class="dropdown">
        <button class="btn btn-sm btn-primary dropdown-toggle" type="button" id="dropdown_small" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Small dropdown
        </button>
        <div class="dropdown-menu dropdown-menu-sm" aria-labelledby="dropdown_small">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>