Dropdown
Examples
We use dropdowns for things like navigation and selection, and selects for forms (when a user is submitting something).
The dropdown toggle and the dropdown itself are both wrapped in .dropdown-parent. Toggles always have a chevron icon. .js-dropdown-toggle and .js-dropdown, along with the associated jQuery code, are not needed on React apps.
ul's inside dropdowns always have .no-bullets and the content in their li's must be wrapped by another element like a span or a. If the dropdown needs to be rounded, the appropriate rounding class must be included (they are square by default). Dropdowns are 15rem wide by default, but that can be overridden with inline styles if necessary.
Dropdowns are left-aligned with their toggle by default, but you can control their direction with .dropdown--right and .dropdown--top.
<div class="dropdown-parent inline-block mr1">
<button class="btn btn--default js-dropdown-toggle">Default Dropdown <i class="i i-chevron-down"></i></button>
<div class="dropdown rounded js-dropdown">
<ul class="no-bullets">
<li><span>Agents</span></li>
<li><a class="link" href="buttons.html">Companies</a></li>
<li><span>Listings</span></li>
</ul>
</div>
</div>
<div class="dropdown-parent inline-block mr1">
<button class="btn btn--default js-dropdown-toggle">Right Dropdown <i class="i i-chevron-down"></i></button>
<div class="dropdown dropdown--right rounded js-dropdown" style="width: 25rem;">
<ul class="no-bullets">
<li><span>Tampa</span></li>
<li><a class="link" href="buttons.html">Seattle</a></li>
<li><span>Dallas</span></li>
</ul>
</div>
</div>
<div class="dropdown-parent inline-block">
<button class="btn btn--default js-dropdown-toggle">Top Dropdown <i class="i i-chevron-up"></i></button>
<div class="dropdown dropdown--top rounded js-dropdown">
<ul class="no-bullets">
<li><span>My Account</span></li>
<li><a class="link" href="buttons.html">My Listings</a></li>
<li><span>My Company</span></li>
</ul>
</div>
</div>
