9 #Dropdown Dropdown
9.1 #Dropdown.default 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>
9.2 #Dropdown.no-items Dropdown with no items
.sf-dropdown .sf-dropdown__no-items
No items
Html
<div class="sf-dropdown">
<div class="sf-dropdown__no-items">
No items
</div>
</div>
9.3 #Dropdown.no-vertical-padding Dropdown without top and bottom padding
.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>