kibana-123/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown.html

Kibana is an open source (Apache Licensed), browser based analytics and search dashboard for Elasticsearch. Kibana is a snap to setup and start using. Kibana strives to be easy to get started with, while also being flexible and powerful, just like Elastic

<div class="kuiLocalNav">
  <div class="kuiLocalNavRow">
    <div class="kuiLocalNavRow__section">
      <div class="kuiLocalBreadcrumbs">
        <div class="kuiLocalBreadcrumb">
          <a class="kuiLocalBreadcrumb__link" href="#">
            Discover
          </a>
        </div>

        <div class="kuiLocalBreadcrumb">
          <a class="kuiLocalBreadcrumb__link" href="#">
            <span class="kuiLocalBreadcrumb__emphasis">0</span> hits
          </a>
        </div>
      </div>
    </div>

    <div class="kuiLocalNavRow__section">
      <div class="kuiLocalMenu">
        <div class="kuiLocalMenuItem kuiLocalMenuItem-isSelected">
          New
        </div>

        <div class="kuiLocalMenuItem">
          Save
        </div>

        <div class="kuiLocalMenuItem">
          Open
        </div>

        <button class="kuiLocalMenuItem">
          <div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
          Last 5 minutes
        </button>
      </div>
    </div>
  </div>

  <div class="kuiLocalDropdown">
    <!-- Dropdown close button -->
    <button class="kuiLocalDropdownCloseButton">
      <span class="fa fa-chevron-circle-up"></span>
    </button>

    <!-- Title -->
    <div class="kuiLocalDropdownTitle">Dropdown title</div>

    <!-- Help text -->
    <div class="kuiLocalDropdownHelpText">
      Here's some help text to explain the purpose of the dropdown.
    </div>

    <!-- Warning -->
    <div class="kuiLocalDropdownWarning">
      Here's some warning text in case the user has something misconfigured.
    </div>

    <div class="kuiLocalDropdownSection">
      <!-- Header -->
      <div class="kuiLocalDropdownHeader">
        <div class="kuiLocalDropdownHeader__label">
          Header for a section of content
        </div>
      </div>

       <!-- Input -->
      <input
        class="kuiLocalDropdownInput"
        type="text"
        placeholder="Input something here"
      />
    </div>

    <div class="kuiLocalDropdownSection">
      <!-- Header -->
      <div class="kuiLocalDropdownHeader">
        <div class="kuiLocalDropdownHeader__label">
          Header for another section of content
        </div>
        <div class="kuiLocalDropdownHeader__actions">
          <a
            class="kuiLocalDropdownHeader__action"
            href=""
          >
            Action A
          </a>
          <a
            class="kuiLocalDropdownHeader__action"
            href=""
          >
            Action B
          </a>
        </div>
      </div>

      <!-- Input -->
      <input
        class="kuiLocalDropdownInput"
        type="text"
        readonly
        value="This is some text inside of a read-only input"
      />

      <!-- Notes -->
      <div class="kuiLocalDropdownFormNote">
        Here are some notes to explain the purpose of this section of the dropdown.
      </div>
    </div>
  </div>

  <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
    <div class="kuiLocalSearch">
      <input
        class="kuiLocalSearchInput"
        type="text"
        placeholder="Filter..."
        autocomplete="off"
      >
      <button class="kuiLocalSearchButton">
        <span class="kuiIcon fa-search"></span>
      </button>
    </div>
  </div>
</div>