Lexicon v1.0.32

Dropdowns

Default

<ul class="dropdown-menu">
    <li class="dropdown-header">Order by:</li>
    <li class="active"><a href="#">Author</a></li>
    <li class="disabled"><a href="#">Title Entry</a></li>
    <li class="divider"></li>
    <li><a href="#">Date</a></li>
    <li><a href="#">Description</a></li>
    <li><a href="#">Status</a></li>
</ul>

Scrolling Content

Nest <ul class="inline-scroller"></ul> inside a .dropdown-menu list item to create a scrollable list. The default height is 125px.

<ul class="dropdown-menu">
    <li class="dropdown-header">Dropdown Header</li>
    <li>
        <ul class="inline-scroller">
            <li><a href="#">Actions</a></li>
            <li><a href="#">Edit</a></li>
            <li><a href="#">View</a></li>
            <li><a href="#">Permissions</a></li>
            <li><a href="#">Actions</a></li>
            <li><a href="#">Edit</a></li>
            <li><a href="#">View</a></li>
            <li><a href="#">Permissions</a></li>
            <li><a href="#">Actions</a></li>
            <li><a href="#">Edit</a></li>
            <li><a href="#">View</a></li>
            <li><a href="#">Permissions</a></li>
            <li><a href="#">Actions</a></li>
            <li><a href="#">Edit</a></li>
            <li><a href="#">View</a></li>
            <li><a href="#">Permissions</a></li>
        </ul>
    </li>
    <li class="disabled"><a href="#">Disabled</a></li>
    <li class="divider"></li>
    <li><a href="#">Scope</a></li>
</ul>

Dropdown wide / full

Use .dropdown-wide with .dropdown to make the dropdown menu big. The default width is 500px. Use .dropdown-full to create a dropdown menu as wide as its relative parent. See dropdown examples.

<div class="dropdown dropdown-wide">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        Dropdown <span class="caret"></span>
    </a>

    <ul class="dropdown-menu">
        <li class="col-sm-4">
            <ul class="link-list">
                <li class="link-list-heading">By Resource</li>
                <li><a href="#1">Support Home</a></li>
                <li class="disabled"><a href="#1">Ask the Experts</a></li>
                <li><a href="#1">Chat or Call</a></li>
            </ul>

            <ul class="link-list">
                <li class="link-list-heading">By Product</li>
                <li><a href="#1">Developing for the Platform</a></li>
                <li><a href="#1">Mastering Fundamentals</a></li>
                <li><a href="#1">Styling with Themes</a></li>
                <li><a href="#1">Managing Content</a></li>
            </ul>
        </li>

        <li class="col-sm-4">
            <ul class="link-list">
                <li class="link-list-heading">Popular Picks</li>
                <li><a href="#1">Error Messages</a></li>
                <li><a href="#1">Updates: Service Packs & Fixes</a></li>
                <li><a href="#1">Install, Upgrade, & Activate</a></li>
                <li><a href="#1">Regular Drivers</a></li>
                <li><a href="#1">Hardware Drivers</a></li>
            </ul>

            <ul class="link-list">
                <li class="link-list-heading">Security</li>
                <li><a href="#1">Security Home</a></li>
                <li><a href="#1">Security Essentials</a></li>
                <li><a href="#1">Protecting Your Data</a></li>
                <li><a href="#1">Securing Your Browser</a></li>
            </ul>
        </li>

        <li class="col-sm-4">
            <ul class="link-list">
                <li class="link-list-heading">By Audience</li>
                <li><a href="#1">For Home Users</a></li>
                <li><a href="#1">For Small Business</a></li>
                <li><a href="#1">For IT Professionals</a></li>
                <li><a href="#1">For Developers</a></li>
            </ul>
        </li>
    </ul>
</div>

Align a dropdown menu on the top or bottom side with classes dropdown-menu, dropdown-menu-right, dropdown-menu-top, or dropdown-menu-top-right

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
        Default <span aria-hidden="true" class="icon-caret-down"></span>
    </button>
    <ul class="dropdown-menu">
        ...
    </ul>
</div>

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
        Right <span aria-hidden="true" class="icon-caret-down"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right">
      ...
    </ul>
</div>

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
        Top <span aria-hidden="true" class="icon-caret-up"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-top">
        ...
    </ul>
</div>

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
        Top Right <span aria-hidden="true" class="icon-caret-up"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-top-right">
        ...
    </ul>
</div>

Align a dropdown menu on the left or right side with classes dropdown-menu-right-side, dropdown-menu-left-side, dropdown-menu-right-side-bottom, or dropdown-menu-left-side-bottom.

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
        Right Side <span aria-hidden="true" class="icon-caret-right"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right-side">
        ...
    </ul>
</div>

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
        <span aria-hidden="true" class="icon-caret-left"></span> Left Side
    </button>
    <ul class="dropdown-menu dropdown-menu-left-side">
        ...
    </ul>
</div>

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
        Right Side Bottom <span aria-hidden="true" class="icon-caret-right"></span>
    </button>
    <div class="dropdown-menu dropdown-menu-right-side-bottom">
        ...
    </div>
</div>

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
        <span aria-hidden="true" class="icon-caret-left"></span> Left Side Bottom
    </button>
    <div class="dropdown-menu dropdown-menu-left-side-bottom">
        ...
    </div>
</div>

We've also added the option to center the dropdown to its trigger in the 4 different dropdown-menu positions with classes dropdown-menu-center, dropdown-menu-top-center, dropdown-menu-left-side-middle, or dropdown-menu-right-side-middle.

You can center the dropdown menu in browsers that don't support css transforms by setting a negative margin-left equal to the width of the dropdown-menu divided by 2. For left-side and right-side dropdown-menus vertically align them by setting a negative margin-top equal to the height of the dropdown-menu divided by 2.

<div class="dropdown" style="display: inline-block;">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
        Center <span aria-hidden="true" class="icon-caret-down"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-center">
        <li class="dropdown-header">dropdown-menu-center</li>
        <li><a href="#">Action</a></li>
        <li class="disabled"><a href="#">Disabled</a></li>
        <li class="divider"></li>
        <li><a href="#">Scope</a></li>
    </ul>
</div>

<div class="dropdown" style="display: inline-block;">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
        Top Center <span aria-hidden="true" class="icon-caret-up"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-top-center">
        <li class="dropdown-header">dropdown-menu-top-center</li>
        <li><a href="#">Action</a></li>
        <li class="disabled"><a href="#">Disabled</a></li>
        <li class="divider"></li>
        <li><a href="#">Scope</a></li>
    </ul>
</div>

<div class="dropdown" style="display: inline-block;">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
        <span aria-hidden="true" class="icon-caret-left"></span> Left Side Middle
    </button>
    <ul class="dropdown-menu dropdown-menu-left-side-middle">
        <li class="dropdown-header">Dropdown Header</li>
        <li>
            <ul class="inline-scroller">
                <li><a href="#">Action</a></li>
                <li class="disabled"><a href="#">Disabled</a></li>
                <li class="divider"></li>
                <li><a href="#">Scope</a></li>
                <li><a href="#">Scope</a></li>
                <li><a href="#">Scope</a></li>
                <li><a href="#">Scope</a></li>
                <li><a href="#">Scope</a></li>
                <li><a href="#">Scope</a></li>
            </ul>
        </li>
    </ul>
</div>

<div class="dropdown" style="display: inline-block;">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
        Right Side Middle <span aria-hidden="true" class="icon-caret-right"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right-side-middle">
        <li class="dropdown-header">Dropdown Header</li>
        <li><a href="#">Action</a></li>
        <li class="disabled"><a href="#">Disabled</a></li>
        <li class="divider"></li>
        <li><a href="#">Scope</a></li>
    </ul>
</div>