carbon-components/src/components/detail-page-header/detail-page-header.html

Carbon Components is a component library for IBM Cloud

<div class="test-header"></div>
<div class="test-nav"></div>
<header data-detail-page-header class="bx--detail-page-header bx--detail-page-header--no-tabs">
  <div class="bx--detail-page-header-content">
    <div class="bx--breadcrumb">
      <div class="bx--breadcrumb-item">
        <a href="#" class="bx--link">Breadcrumb 1</a>
      </div>
      <div class="bx--breadcrumb-item">
        <a href="#" class="bx--link">Breadcrumb 2</a>
      </div>
      <div class="bx--breadcrumb-item">
        <a href="#" class="bx--link">Breadcrumb 3</a>
      </div>
    </div>
    <div class="bx--detail-page-header-title-container">
      <div class="bx--detail-page-header-icon-container">
        <svg width="24" height="24" viewBox="0 0 24 24">
          <path fill="#D8D8D8" d="M0 0h24v24H0z" fill-rule="evenodd" />
        </svg>
      </div>
      <h1 class="bx--detail-page-header-title">Title</h1>
      <div class="bx--detail-page-header-status-container">
        <div class="bx--detail-page-header-status-icon"></div>
        <span class="bx--detail-page-header-status-text">Running</span>
      </div>
    </div>
  </div>
  <div class="bx--detail-page-header-menu">
    <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
      <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 bx--overflow-menu--flip">
        <li class="bx--overflow-menu-options__option">
          <button class="bx--overflow-menu-options__btn">Stop app</button>
        </li>
        <li class="bx--overflow-menu-options__option">
          <button class="bx--overflow-menu-options__btn">Restart app</button>
        </li>
        <li class="bx--overflow-menu-options__option">
          <button class="bx--overflow-menu-options__btn">Rename app</button>
        </li>
        <li class="bx--overflow-menu-options__option">
          <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
        </li>
        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
          <button class="bx--overflow-menu-options__btn">Delete app</button>
        </li>
      </ul>
    </div>
  </div>
</header>