Selects (Dropdowns)
Basic
A dropdown requires boostrap.js. Include bootstrap.js or bootstrap.min.js in your pages.
Add data-toggle="dropdown" attribute to toggle a dropdown menu.
Order a beer you like to drink first today
More actions
Action 2
Only one beer
Set Goal
p
.c-dropdown
.c-dropdown__body
.c-dropdown__toggle data-toggle="dropdown"
| Order a beer you like to drink first today
i.kzicon.kzicon-arrow-down
ul.c-dropdown__menu
li: a.c-dropdown__item Yona Yona Ale
li.active: a.c-dropdown__item Tokyo Black
li: a.c-dropdown__item Indian Aooni
li: a.c-dropdown__item Yona Yona Real Ale
li: a.c-dropdown__item Wednesday cat
button.c-btn Save
p
.c-dropdown
.c-dropdown__body
.c-dropdown__toggle data-toggle="dropdown"
| More actions
i.kzicon.kzicon-arrow-down
ul.c-dropdown__menu
li: a.c-dropdown__item Yona Yona Ale
li.active: a.c-dropdown__item Tokyo Black
li: a.c-dropdown__item Indian Aooni
li: a.c-dropdown__item Yona Yona Real Ale
li: a.c-dropdown__item Wednesday cat
.c-dropdown
.c-dropdown__body
.c-dropdown__toggle data-toggle="dropdown"
| Action 2
i.kzicon.kzicon-arrow-down
ul.c-dropdown__menu
li: a.c-dropdown__item Action 1
li.active: a.c-dropdown__item Action 2
li: a.c-dropdown__item Action 3
li: a.c-dropdown__item Action 4
li: a.c-dropdown__item Action 5
p
.c-dropdown
.c-dropdown__body
.c-dropdown__toggle data-toggle="dropdown"
| Only one beer
i.kzicon.kzicon-arrow-down
ul.c-dropdown__menu
li: a.c-dropdown__item Yona Yona Ale
.c-dropdown
.c-dropdown__body
.c-dropdown__toggle data-toggle="dropdown"
span.kzicon.kzicon-goal-page_visit
span Set Goal
i.kzicon.kzicon-arrow-down
ul.c-dropdown__menu
li.active: a.c-dropdown__item
span.kzicon.kzicon-goal-click
span Goal #1
li: a.c-dropdown__item
span.kzicon.kzicon-goal-click
span Goal #2
<p>
<div class="c-dropdown">
<div class="c-dropdown__body">
<div class="c-dropdown__toggle" data-toggle="dropdown">
Order a beer you like to drink first today<i class="kzicon kzicon-arrow-down"></i>
</div>
<ul class="c-dropdown__menu">
<li>
<a class="c-dropdown__item">Yona Yona Ale</a>
</li>
<li class="active">
<a class="c-dropdown__item">Tokyo Black</a>
</li>
<li>
<a class="c-dropdown__item">Indian Aooni</a>
</li>
<li>
<a class="c-dropdown__item">Yona Yona Real Ale</a>
</li>
<li>
<a class="c-dropdown__item">Wednesday cat</a>
</li>
</ul>
</div>
</div>
<button class="c-btn">Save</button>
</p>
<p>
<div class="c-dropdown">
<div class="c-dropdown__body">
<div class="c-dropdown__toggle" data-toggle="dropdown">
More actions<i class="kzicon kzicon-arrow-down"></i>
</div>
<ul class="c-dropdown__menu">
<li>
<a class="c-dropdown__item">Yona Yona Ale</a>
</li>
<li class="active">
<a class="c-dropdown__item">Tokyo Black</a>
</li>
<li>
<a class="c-dropdown__item">Indian Aooni</a>
</li>
<li>
<a class="c-dropdown__item">Yona Yona Real Ale</a>
</li>
<li>
<a class="c-dropdown__item">Wednesday cat</a>
</li>
</ul>
</div>
</div>
<div class="c-dropdown">
<div class="c-dropdown__body">
<div class="c-dropdown__toggle" data-toggle="dropdown">
Action 2<i class="kzicon kzicon-arrow-down"></i>
</div>
<ul class="c-dropdown__menu">
<li>
<a class="c-dropdown__item">Action 1</a>
</li>
<li class="active">
<a class="c-dropdown__item">Action 2</a>
</li>
<li>
<a class="c-dropdown__item">Action 3</a>
</li>
<li>
<a class="c-dropdown__item">Action 4</a>
</li>
<li>
<a class="c-dropdown__item">Action 5</a>
</li>
</ul>
</div>
</div>
</p>
<p>
<div class="c-dropdown">
<div class="c-dropdown__body">
<div class="c-dropdown__toggle" data-toggle="dropdown">
Only one beer<i class="kzicon kzicon-arrow-down"></i>
</div>
<ul class="c-dropdown__menu">
<li>
<a class="c-dropdown__item">Yona Yona Ale</a>
</li>
</ul>
</div>
</div>
<div class="c-dropdown">
<div class="c-dropdown__body">
<div class="c-dropdown__toggle" data-toggle="dropdown">
<span class="kzicon kzicon-goal-page_visit"></span><span>Set Goal</span><i class="kzicon kzicon-arrow-down"></i>
</div>
<ul class="c-dropdown__menu">
<li class="active">
<a class="c-dropdown__item"><span class="kzicon kzicon-goal-click"></span><span>Goal #1</span></a>
</li>
<li>
<a class="c-dropdown__item"><span class="kzicon kzicon-goal-click"></span><span>Goal #2</span></a>
</li>
</ul>
</div>
</div>
</p>Colors
Add .-color-dark if you need dark dropdown.
Order a beer you like to drink first today
.c-dropdown.-color-dark
.c-dropdown__body
.c-dropdown__toggle data-toggle="dropdown"
| Order a beer you like to drink first today
i.kzicon.kzicon-arrow-down
ul.c-dropdown__menu
li: a.c-dropdown__item Yona Yona Ale
li.active: a.c-dropdown__item Tokyo Black
li: a.c-dropdown__item Indian Aooni
li: a.c-dropdown__item Yona Yona Real Ale
li: a.c-dropdown__item Wednesday cat
<div class="c-dropdown -color-dark">
<div class="c-dropdown__body">
<div class="c-dropdown__toggle" data-toggle="dropdown">
Order a beer you like to drink first today<i class="kzicon kzicon-arrow-down"></i>
</div>
<ul class="c-dropdown__menu">
<li>
<a class="c-dropdown__item">Yona Yona Ale</a>
</li>
<li class="active">
<a class="c-dropdown__item">Tokyo Black</a>
</li>
<li>
<a class="c-dropdown__item">Indian Aooni</a>
</li>
<li>
<a class="c-dropdown__item">Yona Yona Real Ale</a>
</li>
<li>
<a class="c-dropdown__item">Wednesday cat</a>
</li>
</ul>
</div>
</div>Scrollable
Use .-scrollable if you have a lot of options and want to show a scroll bar inside a menu. The first 10 options will be shown.
Tokyo Black
Tokyo Black
Tokyo Black
Tokyo Black
p
.c-dropdown.-scrollable
.c-dropdown__body
.c-dropdown__toggle data-toggle="dropdown"
| Tokyo Black
i.kzicon.kzicon-arrow-down
ul.c-dropdown__menu
li: a.c-dropdown__item Yona Yona Ale
li.active: a.c-dropdown__item Tokyo Black
li: a.c-dropdown__item Indian Aooni
li: a.c-dropdown__item Yona Yona Real Ale
li: a.c-dropdown__item Wednesday cat
.c-dropdown.-scrollable.-color-dark
.c-dropdown__body
.c-dropdown__toggle data-toggle="dropdown"
| Tokyo Black
i.kzicon.kzicon-arrow-down
ul.c-dropdown__menu
li: a.c-dropdown__item Yona Yona Ale
li.active: a.c-dropdown__item Tokyo Black
li: a.c-dropdown__item Indian Aooni
li: a.c-dropdown__item Yona Yona Real Ale
li: a.c-dropdown__item Wednesday cat
p
.c-dropdown.-scrollable
.c-dropdown__body
.c-dropdown__toggle data-toggle="dropdown"
| Tokyo Black
i.kzicon.kzicon-arrow-down
ul.c-dropdown__menu
li: a.c-dropdown__item Yona Yona Ale
li.active: a.c-dropdown__item Tokyo Black
li: a.c-dropdown__item Indian Aooni
li: a.c-dropdown__item Yona Yona Real Ale
li: a.c-dropdown__item Wednesday cat
li: a.c-dropdown__item Minoh beer Pilsner
li: a.c-dropdown__item Minoh beer Stout
li: a.c-dropdown__item Minoh beer Pale ale
li: a.c-dropdown__item Minoh beer Pilsner
li: a.c-dropdown__item Minoh beer Stout
li: a.c-dropdown__item Minoh beer Pale ale
li: a.c-dropdown__item Minoh beer Pilsner
li: a.c-dropdown__item Minoh beer Stout
li: a.c-dropdown__item Minoh beer Pale ale
.c-dropdown.-scrollable.-color-dark
.c-dropdown__body
.c-dropdown__toggle data-toggle="dropdown"
| Tokyo Black
i.kzicon.kzicon-arrow-down
ul.c-dropdown__menu
li: a.c-dropdown__item Yona Yona Ale
li.active: a.c-dropdown__item Tokyo Black
li: a.c-dropdown__item Indian Aooni
li: a.c-dropdown__item Yona Yona Real Ale
li: a.c-dropdown__item Wednesday cat
li: a.c-dropdown__item Minoh beer Pilsner
li: a.c-dropdown__item Minoh beer Stout
li: a.c-dropdown__item Minoh beer Pale ale
li: a.c-dropdown__item Minoh beer Pilsner
li: a.c-dropdown__item Minoh beer Stout
li: a.c-dropdown__item Minoh beer Pale ale
li: a.c-dropdown__item Minoh beer Pilsner
li: a.c-dropdown__item Minoh beer Stout
li: a.c-dropdown__item Minoh beer Pale ale
<p>
<div class="c-dropdown -scrollable">
<div class="c-dropdown__body">
<div class="c-dropdown__toggle" data-toggle="dropdown">
Tokyo Black<i class="kzicon kzicon-arrow-down"></i>
</div>
<ul class="c-dropdown__menu">
<li>
<a class="c-dropdown__item">Yona Yona Ale</a>
</li>
<li class="active">
<a class="c-dropdown__item">Tokyo Black</a>
</li>
<li>
<a class="c-dropdown__item">Indian Aooni</a>
</li>
<li>
<a class="c-dropdown__item">Yona Yona Real Ale</a>
</li>
<li>
<a class="c-dropdown__item">Wednesday cat</a>
</li>
</ul>
</div>
</div>
<div class="c-dropdown -scrollable -color-dark">
<div class="c-dropdown__body">
<div class="c-dropdown__toggle" data-toggle="dropdown">
Tokyo Black<i class="kzicon kzicon-arrow-down"></i>
</div>
<ul class="c-dropdown__menu">
<li>
<a class="c-dropdown__item">Yona Yona Ale</a>
</li>
<li class="active">
<a class="c-dropdown__item">Tokyo Black</a>
</li>
<li>
<a class="c-dropdown__item">Indian Aooni</a>
</li>
<li>
<a class="c-dropdown__item">Yona Yona Real Ale</a>
</li>
<li>
<a class="c-dropdown__item">Wednesday cat</a>
</li>
</ul>
</div>
</div>
</p>
<p>
<div class="c-dropdown -scrollable">
<div class="c-dropdown__body">
<div class="c-dropdown__toggle" data-toggle="dropdown">
Tokyo Black<i class="kzicon kzicon-arrow-down"></i>
</div>
<ul class="c-dropdown__menu">
<li>
<a class="c-dropdown__item">Yona Yona Ale</a>
</li>
<li class="active">
<a class="c-dropdown__item">Tokyo Black</a>
</li>
<li>
<a class="c-dropdown__item">Indian Aooni</a>
</li>
<li>
<a class="c-dropdown__item">Yona Yona Real Ale</a>
</li>
<li>
<a class="c-dropdown__item">Wednesday cat</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Pilsner</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Stout</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Pale ale</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Pilsner</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Stout</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Pale ale</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Pilsner</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Stout</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Pale ale</a>
</li>
</ul>
</div>
</div>
<div class="c-dropdown -scrollable -color-dark">
<div class="c-dropdown__body">
<div class="c-dropdown__toggle" data-toggle="dropdown">
Tokyo Black<i class="kzicon kzicon-arrow-down"></i>
</div>
<ul class="c-dropdown__menu">
<li>
<a class="c-dropdown__item">Yona Yona Ale</a>
</li>
<li class="active">
<a class="c-dropdown__item">Tokyo Black</a>
</li>
<li>
<a class="c-dropdown__item">Indian Aooni</a>
</li>
<li>
<a class="c-dropdown__item">Yona Yona Real Ale</a>
</li>
<li>
<a class="c-dropdown__item">Wednesday cat</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Pilsner</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Stout</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Pale ale</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Pilsner</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Stout</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Pale ale</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Pilsner</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Stout</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Pale ale</a>
</li>
</ul>
</div>
</div>
</p>If you need to show less options, use .-scrollable-compact.
Tokyo Black
p
.c-dropdown.-scrollable-compact
.c-dropdown__body
.c-dropdown__toggle data-toggle="dropdown"
| Tokyo Black
i.kzicon.kzicon-arrow-down
ul.c-dropdown__menu
li: a.c-dropdown__item Yona Yona Ale
li.active: a.c-dropdown__item Tokyo Black
li: a.c-dropdown__item Indian Aooni
li: a.c-dropdown__item Yona Yona Real Ale
li: a.c-dropdown__item Wednesday cat
li: a.c-dropdown__item Minoh beer Pilsner
li: a.c-dropdown__item Minoh beer Stout
li: a.c-dropdown__item Minoh beer Pale ale
li: a.c-dropdown__item Minoh beer Pilsner
li: a.c-dropdown__item Minoh beer Stout
li: a.c-dropdown__item Minoh beer Pale ale
li: a.c-dropdown__item Minoh beer Pilsner
li: a.c-dropdown__item Minoh beer Stout
li: a.c-dropdown__item Minoh beer Pale ale
<p>
<div class="c-dropdown -scrollable-compact">
<div class="c-dropdown__body">
<div class="c-dropdown__toggle" data-toggle="dropdown">
Tokyo Black<i class="kzicon kzicon-arrow-down"></i>
</div>
<ul class="c-dropdown__menu">
<li>
<a class="c-dropdown__item">Yona Yona Ale</a>
</li>
<li class="active">
<a class="c-dropdown__item">Tokyo Black</a>
</li>
<li>
<a class="c-dropdown__item">Indian Aooni</a>
</li>
<li>
<a class="c-dropdown__item">Yona Yona Real Ale</a>
</li>
<li>
<a class="c-dropdown__item">Wednesday cat</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Pilsner</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Stout</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Pale ale</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Pilsner</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Stout</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Pale ale</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Pilsner</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Stout</a>
</li>
<li>
<a class="c-dropdown__item">Minoh beer Pale ale</a>
</li>
</ul>
</div>
</div>
</p>With an action button
Use .c-dropdown__item--primary to show an primary action item.
Increase flow to a particular page
Increase flow to a particular page
.c-dropdown
.c-dropdown__body
.c-dropdown__toggle data-toggle="dropdown"
| Increase flow to a particular page
i.kzicon.kzicon-arrow-down
ul.c-dropdown__menu
li: a.c-dropdown__item Get more click-through visits
li.active: a.c-dropdown__item Sign-up registration increment
li: a.c-dropdown__item Increase flow to a particular page
li: a.c-dropdown__item Longer sessions from current customers
li: a.c-dropdown__item More page-views from first-time visitors
li: a.c-dropdown__item--primary Create goal
.c-dropdown.-color-dark
.c-dropdown__body
.c-dropdown__toggle data-toggle="dropdown"
| Increase flow to a particular page
i.kzicon.kzicon-arrow-down
ul.c-dropdown__menu
li: a.c-dropdown__item Get more click-through visits
li.active: a.c-dropdown__item Sign-up registration increment
li: a.c-dropdown__item Increase flow to a particular page
li: a.c-dropdown__item Longer sessions from current customers
li: a.c-dropdown__item More page-views from first-time visitors
li: a.c-dropdown__item--primary Create goal
<div class="c-dropdown">
<div class="c-dropdown__body">
<div class="c-dropdown__toggle" data-toggle="dropdown">
Increase flow to a particular page<i class="kzicon kzicon-arrow-down"></i>
</div>
<ul class="c-dropdown__menu">
<li>
<a class="c-dropdown__item">Get more click-through visits</a>
</li>
<li class="active">
<a class="c-dropdown__item">Sign-up registration increment</a>
</li>
<li>
<a class="c-dropdown__item">Increase flow to a particular page</a>
</li>
<li>
<a class="c-dropdown__item">Longer sessions from current customers</a>
</li>
<li>
<a class="c-dropdown__item">More page-views from first-time visitors</a>
</li>
<li>
<a class="c-dropdown__item--primary">Create goal</a>
</li>
</ul>
</div>
</div>
<div class="c-dropdown -color-dark">
<div class="c-dropdown__body">
<div class="c-dropdown__toggle" data-toggle="dropdown">
Increase flow to a particular page<i class="kzicon kzicon-arrow-down"></i>
</div>
<ul class="c-dropdown__menu">
<li>
<a class="c-dropdown__item">Get more click-through visits</a>
</li>
<li class="active">
<a class="c-dropdown__item">Sign-up registration increment</a>
</li>
<li>
<a class="c-dropdown__item">Increase flow to a particular page</a>
</li>
<li>
<a class="c-dropdown__item">Longer sessions from current customers</a>
</li>
<li>
<a class="c-dropdown__item">More page-views from first-time visitors</a>
</li>
<li>
<a class="c-dropdown__item--primary">Create goal</a>
</li>
</ul>
</div>
</div>Sizes
If you need less padding dropdown, add .-width-compact class.
If contains long text, add -width-wide or -width-full class.
Long long long long long long long long long long long long long long long long long
Long long long long long long long long long long long long long long long long long
Long long long long long long long long long long long long long long long long long
Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long
.c-form-group
label Normal size
.c-dropdown
.c-dropdown__body
.c-dropdown__toggle data-toggle="dropdown"
| Long long long long long long long long long long long long long long long long long
i.kzicon.kzicon-arrow-down
ul.c-dropdown__menu
li: a.c-dropdown__item short
li.active: a.c-dropdown__item Long long long long long long long long long long long long long long long long long
li: a.c-dropdown__item short
li: a.c-dropdown__item short
.c-form-group
label Compact size
.c-dropdown.-width-compact
.c-dropdown__body
.c-dropdown__toggle data-toggle="dropdown"
| Long long long long long long long long long long long long long long long long long
i.kzicon.kzicon-arrow-down
ul.c-dropdown__menu
li: a.c-dropdown__item short
li.active: a.c-dropdown__item Long long long long long long long long long long long long long long long long long
li: a.c-dropdown__item short
li: a.c-dropdown__item short
.c-form-group
label wide size
.c-dropdown.-width-wide
.c-dropdown__body
.c-dropdown__toggle data-toggle="dropdown"
| Long long long long long long long long long long long long long long long long long
i.kzicon.kzicon-arrow-down
ul.c-dropdown__menu
li: a.c-dropdown__item short
li.active: a.c-dropdown__item Long long long long long long long long long long long long long
li: a.c-dropdown__item short
li: a.c-dropdown__item short
.c-form-group
label Full size
.c-dropdown.-width-full
.c-dropdown__body
.c-dropdown__toggle data-toggle="dropdown"
| Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long
i.kzicon.kzicon-arrow-down
ul.c-dropdown__menu
li: a.c-dropdown__item short
li.active: a.c-dropdown__item Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long
li: a.c-dropdown__item short
li: a.c-dropdown__item short
<div class="c-form-group">
<label>Normal size</label>
<div class="c-dropdown">
<div class="c-dropdown__body">
<div class="c-dropdown__toggle" data-toggle="dropdown">
Long long long long long long long long long long long long long long long long long<i class="kzicon kzicon-arrow-down"></i>
</div>
<ul class="c-dropdown__menu">
<li>
<a class="c-dropdown__item">short</a>
</li>
<li class="active">
<a class="c-dropdown__item">Long long long long long long long long long long long long long long long long long</a>
</li>
<li>
<a class="c-dropdown__item">short</a>
</li>
<li>
<a class="c-dropdown__item">short</a>
</li>
</ul>
</div>
</div>
</div>
<div class="c-form-group">
<label>Compact size</label>
<div class="c-dropdown -width-compact">
<div class="c-dropdown__body">
<div class="c-dropdown__toggle" data-toggle="dropdown">
Long long long long long long long long long long long long long long long long long<i class="kzicon kzicon-arrow-down"></i>
</div>
<ul class="c-dropdown__menu">
<li>
<a class="c-dropdown__item">short</a>
</li>
<li class="active">
<a class="c-dropdown__item">Long long long long long long long long long long long long long long long long long</a>
</li>
<li>
<a class="c-dropdown__item">short</a>
</li>
<li>
<a class="c-dropdown__item">short</a>
</li>
</ul>
</div>
</div>
</div>
<div class="c-form-group">
<label>wide size</label>
<div class="c-dropdown -width-wide">
<div class="c-dropdown__body">
<div class="c-dropdown__toggle" data-toggle="dropdown">
Long long long long long long long long long long long long long long long long long<i class="kzicon kzicon-arrow-down"></i>
</div>
<ul class="c-dropdown__menu">
<li>
<a class="c-dropdown__item">short</a>
</li>
<li class="active">
<a class="c-dropdown__item">Long long long long long long long long long long long long long</a>
</li>
<li>
<a class="c-dropdown__item">short</a>
</li>
<li>
<a class="c-dropdown__item">short</a>
</li>
</ul>
</div>
</div>
</div>
<div class="c-form-group">
<label>Full size</label>
<div class="c-dropdown -width-full">
<div class="c-dropdown__body">
<div class="c-dropdown__toggle" data-toggle="dropdown">
Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long<i class="kzicon kzicon-arrow-down"></i>
</div>
<ul class="c-dropdown__menu">
<li>
<a class="c-dropdown__item">short</a>
</li>
<li class="active">
<a class="c-dropdown__item">Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long</a>
</li>
<li>
<a class="c-dropdown__item">short</a>
</li>
<li>
<a class="c-dropdown__item">short</a>
</li>
</ul>
</div>
</div>
</div>Disabled status
Add the .disabled class to the .c-dropdown__body class and remove the data-toggle="dropdown" attribute.
.c-dropdown
.c-dropdown__body.disabled
a.c-dropdown__toggle href="#"
| Choose one
i.kzicon.kzicon-arrow-down
ul.c-dropdown__menu
li
a.c-dropdown__item href="#" Stout
li.active
a.c-dropdown__item href="#" Indian Pale Ale (IPA)
li
a.c-dropdown__item href="#" Porter
li
a.c-dropdown__item href="#" Weizen
<div class="c-dropdown">
<div class="c-dropdown__body disabled">
<a class="c-dropdown__toggle" href="#">Choose one<i class="kzicon kzicon-arrow-down"></i></a>
<ul class="c-dropdown__menu">
<li>
<a class="c-dropdown__item" href="#">Stout</a>
</li>
<li class="active">
<a class="c-dropdown__item" href="#">Indian Pale Ale (IPA)</a>
</li>
<li>
<a class="c-dropdown__item" href="#">Porter</a>
</li>
<li>
<a class="c-dropdown__item" href="#">Weizen</a>
</li>
</ul>
</div>
</div>