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>

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>

Keep informed

Sign up to our newsletter to receive updates on Winter CMS releases, new features in the works, and much more.
We'll never spam or give this address away.

Latest blog post

The Winter CMS Web Installer is now available!

Published June 17, 2021
We are super excited to announce that our new Web-based Installer is finally available for download, to make it super easy to get your next Winter CMS project started!

View this post Read all posts

Latest Winter CMS release

v1.1.3

Released April 26, 2021
3 UX/UI Improvements, 19 API Changes, 23 Bug Fixes, 3 Security Improvements, 4 Translation Improvements, 1 Community Improvement, 2 Dependencies

View details View all releases