Dropdown molecule is collated from two atoms. The Button and List.
Made interactive with the Bootstrap dropdown.js plug-in
= codeBlender "dropdown", "molecule", { button: { text: "Dropdown" }, list: { array: [ { text: "Action 1", link: { url: "#" } }, { text: "Action 2", link: { url: "#" } } ] } }
<div class='dropdown'>
<button aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' id='dropdownMenu1' type='button'>
Dropdown
<span class='dropdown__icon'></span>
</button>
<ul aria-labelledby='dropdownMenu1' class='dropdown-menu' role='menu'>
<li ui-sref-active='active'>
<a href="#">Action 1
</a></li>
<li ui-sref-active='active'>
<a href="#">Action 2
</a></li>
</ul>
</div>
= codeBlender "dropdown", "molecule", { button: { text: "Dropdown" }, list: { array: current_page.data.list, extraClass: "dropdown-menu-right" } }
<div class='dropdown'>
<button aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' id='dropdownMenu1' type='button'>
Dropdown
<span class='dropdown__icon'></span>
</button>
<ul aria-labelledby='dropdownMenu1' class='dropdown-menu dropdown-menu-right' role='menu'>
<li class='dropdown-header'>Header</li>
<li ui-sref-active='active'>
<a href="#">Action1
</a></li>
<li ui-sref-active='active'>
<a href="#">Another action
</a></li>
<li class='divider' role='separator'></li>
<li class=' disabled' ui-sref-active='active'>
<a href="#">Action2
</a></li>
</ul>
</div>
= codeBlender "dropdown", "molecule", { button: { href: "javascript:;", text: "Dropdown" }, extraClass: "dropup", list: { array: current_page.data.list } }
<div class='dropup'>
<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='javascript:;' id='dropdownMenu1' role='button' type='button'>
Dropdown
<span class='dropdown__icon'></span>
</a>
<ul aria-labelledby='dropdownMenu1' class='dropdown-menu' role='menu'>
<li class='dropdown-header'>Header</li>
<li ui-sref-active='active'>
<a href="#">Action1
</a></li>
<li ui-sref-active='active'>
<a href="#">Another action
</a></li>
<li class='divider' role='separator'></li>
<li class=' disabled' ui-sref-active='active'>
<a href="#">Action2
</a></li>
</ul>
</div>
= codeBlender "dropdown", "molecule", { button: { text: "Dropdown" }, extraClass: "btn-group", list: { array: current_page.data.list } }
<div class='btn-group'>
<button aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' id='dropdownMenu1' type='button'>
Dropdown
<span class='dropdown__icon'></span>
</button>
<ul aria-labelledby='dropdownMenu1' class='dropdown-menu' role='menu'>
<li class='dropdown-header'>Header</li>
<li ui-sref-active='active'>
<a href="#">Action1
</a></li>
<li ui-sref-active='active'>
<a href="#">Another action
</a></li>
<li class='divider' role='separator'></li>
<li class=' disabled' ui-sref-active='active'>
<a href="#">Action2
</a></li>
</ul>
</div>
= codeBlender "dropdown", "molecule", { extraClass: "clearfix", title: "Drop Down", list: { array: current_page.data.list } }
<div class='clearfix'>
<button aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' id='dropdownMenu1' type='button'>
<span class='dropdown__icon'></span>
</button>
<ul aria-labelledby='dropdownMenu1' class='dropdown-menu' role='menu'>
<li class='dropdown-header'>Header</li>
<li ui-sref-active='active'>
<a href="#">Action1
</a></li>
<li ui-sref-active='active'>
<a href="#">Another action
</a></li>
<li class='divider' role='separator'></li>
<li class=' disabled' ui-sref-active='active'>
<a href="#">Action2
</a></li>
</ul>
</div>
| Title | URL |
|---|---|
| Drop down | http://getbootstrap.com/components/#dropdowns |
| Button drop down | http://getbootstrap.com/components/#btn-dropdowns |
| JavaScript Dropdown | http://getbootstrap.com/javascript/#dropdowns |
| Navigation Dropdown | http://getbootstrap.com/components/#nav-dropdowns |
| Input Group Buttons | http://getbootstrap.com/components/#input-groups-buttons-dropdowns |
| Angular UI Dropdown | http://angular-ui.github.io/bootstrap/#/dropdown |
| Dropdown PSDs | http://thedesigninspiration.com/articles/40-free-dropdown-and-select-box-psd-designs/ |
| Select dropdown | http://www.bootply.com/b4NKREUPkN |
| Task | Date |
|---|---|
| Need to sort out the btn group, dropdown or input btn group elements | |
| Move the see sections to here and todo elements |