9 #Dropdown Dropdown

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Default dropdown

.sf-dropdown

Pages
Blogs14
News items0
Pages
Blogs
News items
Blog posts
Pages
Lists
Restaurants
Html
    <div class="sf-dropdown" style="vertical-align:top;">
        <div class="sf-dropdown__item -active">
            Pages
        </div>
        <div class="sf-dropdown__item -disabled">
             Blogs<span class="sf-dropdown__counter -positive">14</span>
        </div>
        <div class="sf-dropdown__item">
             News items<span class="sf-dropdown__counter -neutral">0</span>
        </div>
    </div>
    <div class="sf-dropdown" style="vertical-align:top;">
        <div class="sf-dropdown__heading">
             Pages
        </div>
        <div class="sf-dropdown__item">
             Blogs
        </div>
        <div class="sf-dropdown__separator">
        </div>
        <div class="sf-dropdown__item">
             News items
        </div>
        <div class="sf-dropdown__item ">
             Blog posts
        </div>
        <div class="sf-dropdown__separator">
        </div>
        <div class="sf-dropdown__heading">
             Pages
        </div>
        <div class="sf-dropdown__item">
             Lists
        </div>
        <div class="sf-dropdown__item">
            Restaurants
        </div>
    </div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-dropdown .sf-dropdown__no-items

No items
Html
    <div class="sf-dropdown">
        <div class="sf-dropdown__no-items">
             No items
        </div>
    </div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-dropdown.-condensed

Restaurants
Hotels
Clubs
Show all related items
Html
    <div class="sf-dropdown -condensed">
        <div class="sf-dropdown__item">
            Restaurants
        </div>
        <div class="sf-dropdown__item">
            Hotels
        </div>
        <div class="sf-dropdown__separator">
        </div>
        <div class="sf-dropdown__item">
            Clubs
        </div>
        <div class="sf-dropdown__item">
             Show all related items
        </div>
    </div>