---
title: Content-dropdown
layout: nested-component.html
---
<style>
    .animation-demo .dropdown-content {
        padding-top: 40px;
        padding-bottom: 40px;
    }
</style>

<h1 class="docs--page-header">Content-dropdown</h1>

<p class="docs--page-description">
    A dropdown designed to hold anything that is not a classic menu. Just wrap your content in a <code>.dropdown-content</code> container.
</p>

<div class="docs--code-example">
    <button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
    <div class="docs--example-container demo docs--prism" data-xrayhtml><div class="dropdown">
    <button class="btn btn-transparent" data-toggle="dropdown">
        GRIDS!
    </button>
    <div class="dropdown-menu">
        <div class="dropdown-content">
            <div class="row">
                <div class="col-xs-6">
                    Like a grid
                </div>
                <div class="col-xs-6">
                    Like a grid
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4">Like a grid</div>
                <div class="col-xs-8">Like a grid</div>
            </div>
        </div>
    </div>
</div></div>
</div>

<div class="docs--code-example">
    <button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
    <div class="docs--example-container demo docs--prism" data-xrayhtml><div class="dropdown">
    <button class="btn btn-transparent" data-toggle="dropdown">
        FORMS!
    </button>
    <div class="dropdown-menu">
        <div class="dropdown-content">
            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Check me out
                    </label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>
</div></div>
</div>


<div class="docs--code-example">
    <button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
    <div class="docs--example-container demo docs--prism" data-xrayhtml><div class="dropdown">
    <button class="btn btn-transparent" data-toggle="dropdown">
        LITERALLY ANYTHING GOES! (EXCEPT JS POWERED COMPONENTS)
    </button>
    <div class="dropdown-menu">
        <div class="dropdown-content">
            <ul class="list-group">
                <li class="list-group-item">
                    <span class="badge">14</span>
                    Cras justo odio
                </li>
                <li class="list-group-item">
                    <span class="badge">2</span>
                    Dapibus ac facilisis in
                </li>
                <li class="list-group-item">
                    <span class="badge">1</span>
                    Morbi leo risus
                </li>
            </ul>
        </div>
    </div>
</div></div>
</div>