Combo box is a dropdown that can be aligned to the left or right of the button. It can also have submenus. It can be used to display a list of options that can be selected by the user.
<div class="combo-box">
<button class="button button-primary button-has-icon">
Dropdown left aligned
<i class="iconoir-nav-arrow-down"></i>
</button>
<ul class="combo-box-menu">
<li class="combo-box-item">
<a href="#" class="combo-box-link">
<span class="combo-box-primary">
<i class="iconoir-share-ios"></i>
Option A
</span>
<span class="combo-box-secondary">CTRL+R</span>
</a>
</li>
<li class="combo-box-item">
<a href="#" class="combo-box-link">
<span class="combo-box-primary">
<i class="iconoir-share-ios"></i>
Option B
</span>
</a>
<ul class="combo-box-submenu">
<li class="combo-box-item">
<a href="#" class="combo-box-link">
<span class="combo-box-primary">
<i class="iconoir-share-ios"></i>
Option BA
</span>
<span class="combo-box-secondary">CTRL+R</span>
</a>
</li>
<li class="combo-box-item">
<a href="#" class="combo-box-link">
<span class="combo-box-primary">
<i class="iconoir-share-ios"></i>
Option BB
</span>
</a>
<ul class="combo-box-submenu">
<li class="combo-box-item">
<a href="#" class="combo-box-link">
<span class="combo-box-primary">
<i class="iconoir-share-ios"></i>
Option BBA
</span>
<span class="combo-box-secondary">CTRL+R</span>
</a>
</li>
<li class="combo-box-item">
<a href="#" class="combo-box-link">
<span class="combo-box-primary">
<i class="iconoir-share-ios"></i>
Option BBB
</span>
<span class="combo-box-secondary">CTRL+R</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="combo-box-item">
<a href="#" class="combo-box-link">
<span class="combo-box-primary">
<i class="iconoir-share-ios"></i>
Option C
</span>
<span class="combo-box-secondary">CTRL+R</span>
</a>
</li>
<li class="combo-box-item combo-box-item-sep"></li>
<li class="combo-box-item combo-box-item-header">Group header</li>
<li class="combo-box-item">
<a href="#" class="combo-box-link">
<span class="combo-box-primary">
<i class="iconoir-share-ios"></i>
Option A
</span>
<span class="combo-box-secondary">CTRL+R</span>
</a>
</li>
</ul>
</div><div class="combo-box combo-box-right">
<button class="button button-primary button-has-icon">
Dropdown right aligned
<i class="iconoir-nav-arrow-down"></i>
</button>
<ul class="combo-box-menu">
<li class="combo-box-item">
<a href="#" class="combo-box-link">
<span class="combo-box-primary">
<i class="iconoir-share-ios"></i>
Option A
</span>
<span class="combo-box-secondary">CTRL+R</span>
</a>
</li>
<li class="combo-box-item">
<a href="#" class="combo-box-link">
<span class="combo-box-primary">
<i class="iconoir-share-ios"></i>
Option B
</span>
</a>
<ul class="combo-box-submenu">
<li class="combo-box-item">
<a href="#" class="combo-box-link">
<span class="combo-box-primary">
<i class="iconoir-share-ios"></i>
Option BA
</span>
<span class="combo-box-secondary">CTRL+R</span>
</a>
</li>
<li class="combo-box-item">
<a href="#" class="combo-box-link">
<span class="combo-box-primary">
<i class="iconoir-share-ios"></i>
Option BB
</span>
</a>
<ul class="combo-box-submenu">
<li class="combo-box-item">
<a href="#" class="combo-box-link">
<span class="combo-box-primary">
<i class="iconoir-share-ios"></i>
Option BBA
</span>
<span class="combo-box-secondary">CTRL+R</span>
</a>
</li>
<li class="combo-box-item">
<a href="#" class="combo-box-link">
<span class="combo-box-primary">
<i class="iconoir-share-ios"></i>
Option BBB
</span>
<span class="combo-box-secondary">CTRL+R</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="combo-box-item">
<a href="#" class="combo-box-link">
<span class="combo-box-primary">
<i class="iconoir-share-ios"></i>
Option C
</span>
<span class="combo-box-secondary">CTRL+R</span>
</a>
</li>
<li class="combo-box-item combo-box-item-sep"></li>
<li class="combo-box-item combo-box-item-header">Group header</li>
<li class="combo-box-item">
<a href="#" class="combo-box-link">
<span class="combo-box-primary">
<i class="iconoir-share-ios"></i>
Option A
</span>
<span class="combo-box-secondary">CTRL+R</span>
</a>
</li>
</ul>
</div>You have to add JavaScript to make it work. Example code -
const comboBoxes = document.querySelectorAll(".combo-box");
// Open
comboBoxes.forEach(comboBox => {
comboBox.addEventListener("click", (e) => {
e.stopPropagation(); // prevent immediate outside click closing
comboBox.classList.toggle("open");
// Close others when one opens
if (comboBox.classList.contains("open")) {
comboBoxes.forEach(other => {
if (other !== comboBox) {
other.classList.remove("open");
}
});
}
});
});$combo-box-icon-size: rem(5) !default;
$combo-box-icon-size-small: rem(4) !default;
$combo-box-icon-size-large: rem(7) !default;
$combo-box-width: rem(220) !default;
$combo-box-shadow: 0 rem(2) rem(5) 0 rgba(0, 0, 0, 0.08) !default;
$combo-box-show-animation-duration: 50ms !default;
$combo-box-item-y-padding: rem(7) !default;
$combo-box-item-x-padding: rem(15) !default;--r-combo-box-icon-size: #{$combo-box-icon-size};
--r-combo-box-width: #{$combo-box-width};
--r-combo-box-background: var(--r-color-white-darken-2);
--r-combo-box-border-color: var(--r-color-white-darken-15);
--r-combo-box-shadow: #{$combo-box-shadow};
--r-combo-box-item-color: var(--r-color-dark-lighten-20);
--r-combo-box-item-hover-background-color: var(--r-color-white-darken-5);
--r-combo-box-item-hover-color: var(--r-color-dark);
--r-combo-box-item-sep: var(--r-color-white-darken-8);
--r-combo-box-border-radius: var(--r-global-border-radius);
--r-combo-box-secondary-color: var(--r-color-dark-lighten-50);
--r-combo-box-item-header-color: var(--r-color-dark-lighten-60);
--r-combo-box-show-animation-duration: #{$combo-box-show-animation-duration};
--r-combo-box-item-x-padding: #{$combo-box-item-x-padding};
--r-combo-box-item-y-padding: #{$combo-box-item-y-padding};