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

Carbon Components is a component library for IBM Cloud

<div class="test-header"></div>
<header data-detail-page-header class="bx--detail-page-header bx--detail-page-header--with-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>
    <nav data-tabs class="bx--tabs" role="navigation">
      <div class="bx--tabs-trigger">
        <a href="javascript:void(0)" class="bx--tabs-trigger-text"></a>
        <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
          <path d="M10 0L5 5 0 0z"></path>
        </svg>
      </div>
      <ul class="bx--tabs__nav bx--tabs__nav--hidden" role="tablist">
        <li class="bx--tabs__nav-item bx--tabs__nav-item--selected" data-target=".tab-1" role="presentation">
          <a id="tab-link-1-with-tabs" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-selected="true">Tab Label 1</a>
        </li>
        <li class="bx--tabs__nav-item" data-target=".tab-2" role="presentation">
          <a id="tab-link-2-with-tabs" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-selected="false">Tab Label 2</a>
        </li>
        <li class="bx--tabs__nav-item" data-target=".tab-3" role="presentation">
          <a id="tab-link-3-with-tabs" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-selected="false">Tab Label 3</a>
        </li>
        <li class="bx--tabs__nav-item" data-target=".tab-4" role="presentation">
          <a id="tab-link-4-with-tabs" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-selected="false">Tab Label 4</a>
        </li>
        <li class="bx--tabs__nav-item" data-target=".tab-5" role="presentation">
          <a id="tab-link-5-with-tabs" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-selected="false">Tab Label 5</a>
        </li>
      </ul>
    </nav>
  </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</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>