Clay CSS v3.9.0

Dropdowns

.link-outline-* can be used on .dropdown-toggle with an a or button tag. Use an a with href if you want no focus outline on click and the browser default focus outline on tab. A button will have a custom focus outline on click and tab.

Using Bootstrap 4's .btn classes will always have a custom focus outline on click and tab.

A monospaced dropdown-toggle for a dropdown containing several actions, add dropdown-action to dropdown.

Disabled a.dropdown-item should have tabindex="-1" and event.preventDefault(); on click or use <span class="dropdown-item">Disabled</span> for disabled dropdown-item.
  • Filter by
  • Order by
dropdown-menu-indicator-start
dropdown-menu-indicator-end
dropdown-menu-indicator-start
dropdown-menu-indicator-end
Anchor Tags
Buttons
Anchor Tags
Buttons

Scrolling Content

Nest <div class="inline-scroller"></div> inside a .dropdown-menu list item to create a scrollable dropdown. The maximum height is 200px on screen sizes 768px and above, on screen sizes 767px and below the overflow is handled by .dropdown-menu.

Dropdown wide / full

Use .dropdown-wide with .dropdown to make the dropdown menu big. The default width is 500px. Use .dropdown-full to create a dropdown menu as wide as its relative parent. See dropdown examples.

Align a dropdown menu on the top or bottom side with classes dropdown-menu, dropdown-menu-right, dropdown-menu-top, or dropdown-menu-top-right

Align a dropdown menu on the left or right side with classes dropdown-menu-right-side, dropdown-menu-left-side, dropdown-menu-right-side-bottom, or dropdown-menu-left-side-bottom.

We've also added the option to center the dropdown to its trigger in the 4 different dropdown-menu positions with classes dropdown-menu-center, dropdown-menu-top-center, dropdown-menu-left-side-middle, or dropdown-menu-right-side-middle.

You can center the dropdown menu in browsers that don't support css transforms by setting a negative margin-left equal to the width of the dropdown-menu divided by 2. For left-side and right-side dropdown-menus vertically align them by setting a negative margin-top equal to the height of the dropdown-menu divided by 2.