Dropdown

Customized dropdown menu

#Small dropdown

<div class="dropdown">
    <a href="#" data-toggle="dropdown" class="btn btn-primary wn-icon-plus">Add small</a>

    <ul class="dropdown-menu" role="menu" data-dropdown-title="Add something small">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-folder">Group</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-copy">Page</a></li>
    </ul>
</div>

<div class="dropdown">
    <a href="#" data-toggle="dropdown" class="btn btn-primary wn-icon-plus">Add small</a>

    <ul class="dropdown-menu" role="menu" data-dropdown-title="Add something small">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-folder">Group</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-copy">Page</a></li>
    </ul>
</div>

#Drop "up"

Add the dropup class to the dropdown container and the dropdown will appear in an upward direction.

<div class="dropdown dropup">
    ...
</div>

#Large dropdown

<div class="dropdown">
    <a href="#" data-toggle="dropdown" class="btn btn-primary wn-icon-plus">Add large</a>

    <ul class="dropdown-menu" role="menu" data-dropdown-title="Add something large">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-folder">Group</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-copy">Page</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-briefcase">Briefcase</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-link">Link</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-tag">Tag</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-search-minus">Zoom out</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-briefcase">Briefcase</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-link">Link</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-tag">Tag</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-search-minus">Zoom out</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-briefcase">Briefcase</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-link">Link</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-tag">Tag</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-search-minus">Zoom out</a></li>
    </ul>
</div>

<div class="dropdown">
    <a href="#" data-toggle="dropdown" class="btn btn-primary wn-icon-plus">Add large</a>

    <ul class="dropdown-menu" role="menu" data-dropdown-title="Add something large">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-folder">Group</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-copy">Page</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-briefcase">Briefcase</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-link">Link</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-tag">Tag</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-search-minus">Zoom out</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-briefcase">Briefcase</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-link">Link</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-tag">Tag</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-search-minus">Zoom out</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-briefcase">Briefcase</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-link">Link</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-tag">Tag</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="wn-icon-search-minus">Zoom out</a></li>
    </ul>
</div>