carbon-components/src/components/toolbar/toolbar.html

Carbon Components is a component library for IBM Cloud

<div class="bx--toolbar" data-toolbar>
  <div class="bx--search bx--search--sm bx--toolbar-search" role="search" data-search data-toolbar-search>
    <label for="search__input" class="bx--label">Search</label>
    <input type="search" class="bx--search-input" id="search__input" placeholder="Search">
    <button class="bx--toolbar-search__btn" aria-label="Toolbar search">
      <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
        <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
        <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
      </svg>
    </button>
    <svg class="bx--search-close bx--search-close--hidden" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"></path>
    </svg>
  </div>
  <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
    <svg class="bx--overflow-menu__icon bx--toolbar-filter-icon" width="24" height="24" viewBox="0 0 24 24" fill-rule="evenodd">
      <path d="M10.9 3c-.4-1.7-2-3-3.9-3S3.6 1.3 3.1 3H0v2h3.1c.4 1.7 2 3 3.9 3s3.4-1.3 3.9-3H24V3H10.9zM7 5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zM17 8c-1.9 0-3.4 1.3-3.9 3H0v2h13.1c.4 1.7 2 3 3.9 3s3.4-1.3 3.9-3H24v-2h-3.1c-.5-1.7-2-3-3.9-3zm0 5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zM7 16c-1.9 0-3.4 1.3-3.9 3H0v2h3.1c.4 1.7 2 3 3.9 3s3.4-1.3 3.9-3H24v-2H10.9c-.5-1.7-2-3-3.9-3zm0 5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
    </svg>
    <ul class="bx--overflow-menu-options">
      <li class="bx--toolbar-menu__title">FILTER BY</li>
      <li class="bx--toolbar-menu__option">
        <input id="filter-option-1" class="bx--checkbox" type="checkbox" value="filter-option-1" name="checkbox">
        <label for="filter-option-1" class="bx--checkbox-label">
          <span class="bx--checkbox-appearance">
            <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
            </svg>
          </span>
          Filter option 1
        </label>
      </li>
      <li class="bx--toolbar-menu__option">
        <input id="filter-option-2" class="bx--checkbox" type="checkbox" value="filter-option-2" name="checkbox">
        <label for="filter-option-2" class="bx--checkbox-label">
          <span class="bx--checkbox-appearance">
            <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
            </svg>
          </span>
          Filter option 2
        </label>
      </li>
      <li class="bx--toolbar-menu__option">
        <input id="filter-option-3" class="bx--checkbox" type="checkbox" value="filter-option-3" name="checkbox">
        <label for="filter-option-3" class="bx--checkbox-label">
          <span class="bx--checkbox-appearance">
            <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
            </svg>
          </span>
          Filter option 3
        </label>
      </li>
    </ul>
  </div>
  <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
      <circle cx="2" cy="2" r="2"></circle>
      <circle cx="2" cy="10" r="2"></circle>
      <circle cx="2" cy="18" r="2"></circle>
    </svg>
    <ul class="bx--overflow-menu-options">
      <li class="bx--overflow-menu-options__option">
        <button type="button" class="bx--overflow-menu-options__btn">Refresh table</button>
      </li>
      <hr class="bx--toolbar-menu__divider" />
      <li class="bx--toolbar-menu__title">ROW HEIGHT</li>
      <fieldset data-row-height class="bx--radio-button-group">
        <legend class="bx--visually-hidden">Select table row height</legend>
        <li class="bx--toolbar-menu__option">
          <input id="short-rows" class="bx--radio-button" type="radio" value="short" name="radio" checked>
          <label for="short-rows" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            Short
          </label>
        </li>
        <li class="bx--toolbar-menu__option">
          <input id="tall-rows" class="bx--radio-button" type="radio" value="tall" name="radio">
          <label for="tall-rows" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            Tall
          </label>
        </li>
      </fieldset>
    </ul>
  </div>
</div>