carbon-components/html/unified-header/unified-header.html

Carbon Components is a component library for IBM Cloud

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<!-- Unified Header -->
<div data-unified-header class="bx--unified-header bx--unified-header--apps" tabindex="0">

  <!-- Super Global Header -->
  <nav role="navigation" class="bx--top-nav" aria-label="Top Header">
      <ul role="menubar" class="bx--top-nav__left-container" aria-hidden="false">
        <li role="menuitem" class="bx--top-nav__left-container__item">
          <a class="bx--top-nav__left-container__link" href="#" tabindex="0">
            <svg class="bx--top-nav__left-container__link--icon">
              <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--header--help"></use>
            </svg>
            Docs
          </a>
        </li>
      </ul>
      <ul role="menubar" class="bx--top-nav__right-container">
        <li data-trial class="bx--top-nav__right-container__item">
          <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
            <li class="bx--dropdown-text">29 Trial Days Remaining</li>
            <svg class="bx--dropdown__arrow">
              <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
            </svg>
            <li>
              <ul class="bx--dropdown-list">
                <li class="bx--dropdown__trial-content">
                  <p class="bx--dropdown__trial-content--desc">Keep your account going by adding your credit card. Don’t worry. We won’t charge you unless you go over your free monthly allowance.</p>
                  <button class='bx--btn' type='button'>Add credit card</button>
                  <a href="#" class="bx--link">Apply promo code</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li data-credit class="bx--top-nav__right-container__item">
          <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
            <li class="bx--dropdown-text">$132 Credit Expires 12/6</li>
            <li>
              <svg class="bx--dropdown__arrow">
                <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
              </svg>
            </li>
            <li>
              <ul class="bx--dropdown-list">
                <li class="bx--dropdown-item bx--dropdown__credit-content">
                  <div>
                    <p class="bx--dropdown__credit-content--heading">Initial Credit Value</p>
                    <p class="bx--dropdown__credit-content--desc">$200</p>
                  </div>
                  <div>
                    <p class="bx--dropdown__credit-content--heading">Expires</p>
                    <p class="bx--dropdown__credit-content--desc">12/25/2016</p>
                  </div>
                  <div>
                    <p class="bx--dropdown__credit-content--heading">Spend Rate</p>
                    <p class="bx--dropdown__credit-content--desc">$1.33/day</p>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li role="menuitem" class="bx--top-nav__right-container__item">
          <ul role="menu" data-profile-switcher class="bx--account-switcher">
            <li tabindex="0" data-profile-switcher-toggle class="bx--account-switcher__toggle">
              <p data-switcher-account-sl class="bx--account-switcher__toggle--text"></p>
              <p data-switcher-account class="bx--account-switcher__toggle--text"></p>
              <p class="bx--account-switcher__toggle--text">|</p>
              <p data-switcher-region class="bx--account-switcher__toggle--text"></p>
              <p data-switcher-org class="bx--account-switcher__toggle--text"></p>
              <p data-switcher-space class="bx--account-switcher__toggle--text"></p>
            </li>
            <li role="menuitem" data-switcher-menu class="bx--account-switcher__menu__container">
              <ul role="menu" class="bx--account-switcher__menu">
                <li role="menuitem" class="bx--account-switcher__menu__item">
                  <p class="bx--account-switcher__menu__item--title">Account</p>
                  <ul role="menu" data-dropdown data-value="Logans_account_123456789_1234" class="bx--dropdown" tabindex="0">
                    <li data-dropdown-account class="bx--dropdown-text">Logans_account_123456789_1234</li>
                    <li>
                      <svg class="bx--dropdown__arrow">
                        <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
                      </svg>
                    </li>
                    <li aria-haspopup="true" class="bx--dropdown--scroll">
                      <ul role="menu" aria-hidden="true" class="bx--dropdown-list">
                        <li role="menuitem" data-option data-value="all" class="bx--dropdown-item"><span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">someone_at_a_company@email.com</span></li>
                        <li role="menuitem" data-option data-value="all" class="bx--dropdown-item"><span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">TJs_accoqwejqwhekjqwgehgunt_54321</span></li>
                        <li role="menuitem" data-option data-value="all" class="bx--dropdown-item">
                          <span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">
                            <span data-dropdown-account-sl-linked>sl123456</span>
                              <svg class="bx--account-switcher__linked-icon">
                                <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--link"></use>
                              </svg>
                            <span data-dropdown-account-linked>Logans_account_123456789_1234</span>
                          </span>
                        </li>
                        <li role="menuitem" data-option data-value="all" class="bx--dropdown-item">
                          <span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">
                            <span data-dropdown-account-sl-linked>s7777</span>
                            <svg class="bx--account-switcher__linked-icon">
                              <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--link"></use>
                            </svg>
                            <span data-dropdown-account-linked>TJs_account_123456789_1234</span>
                          </span>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li class="bx--account-switcher__menu__item">
                  <p class="bx--account-switcher__menu__item--title">Region</p>
                  <ul data-dropdown data-value="US South" class="bx--dropdown" tabindex="0">
                    <li data-dropdown-region class="bx--dropdown-text">US South</li>
                    <svg class="bx--dropdown__arrow">
                      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
                    </svg>
                    <li class="bx--dropdown--scroll">
                      <ul class="bx--dropdown-list">
                        <li data-option data-value="all" class="bx--dropdown-item"><span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">US South</span></li>
                        <li data-option data-value="all" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Sydney</span></li>
                        <li data-option data-value="cloudFoundry" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">United Kingdom</span></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li class="bx--account-switcher__menu__item">
                  <p class="bx--account-switcher__menu__item--title">Organization</p>
                  <ul data-dropdown data-value="Organization 1" class="bx--dropdown" tabindex="0">
                    <li data-dropdown-org class="bx--dropdown-text">Organization 1</li>
                    <svg class="bx--dropdown__arrow">
                      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
                    </svg>
                    <li class="bx--dropdown--scroll">
                      <ul class="bx--dropdown-list">
                        <li data-option data-value="all" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">someone_at_a_company@email.com</span></li>
                        <li data-option data-value="cloudFoundry" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Organization q2332434341sddsf2</span></li>
                        <li data-option data-value="staging" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Organization 3</span></li>
                        <li data-option data-value="dea" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Organization 4</span></li>
                        <li data-option data-value="router" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Organization 5</span></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li class="bx--account-switcher__menu__item">
                  <p class="bx--account-switcher__menu__item--title">Space</p>
                  <ul data-dropdown data-value="Space 2" class="bx--dropdown" tabindex="0">
                    <li data-dropdown-space class="bx--dropdown-text">Space 2</li>
                    <svg class="bx--dropdown__arrow">
                      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
                    </svg>
                    <li class="bx--dropdown--scroll">
                      <ul class="bx--dropdown-list">
                        <li data-option data-value="all" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Dev</span></li>
                        <li data-option data-value="all" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Space 2</span></li>
                        <li data-option data-value="cloudFoundry" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Space 3</span></li>
                        <li data-option data-value="staging" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Space 4</span></li>
                        <li data-option data-value="dea" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Space 5</span></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li class="bx--account-switcher__menu__item">
                  <a href="#" class="bx--link">Manage Organizations</a>
                  <a href="#" class="bx--link">Create A Space</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="bx--top-nav__right-container__item">
          <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
            <li data-top-nav-profile-image class="bx--dropdown-text--profile-image">
              <div class="profile-image">
                <svg class="bx--dropdown__profile-dropdown--picture">
                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--user"></use>
                </svg>
              </div>
            </li>
            <li class="bx--dropdown__profile-dropdown">
              <ul class="bx--dropdown-list">
                <li data-option data-value="all" class="bx--dropdown-item">
                  <svg class="bx--dropdown__profile-dropdown--picture">
                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--user"></use>
                  </svg>
                  <div class="bx--dropdown__profile-dropdown--information">
                    <p>Erlich Bachman Erlich Bachman</p>
                    <div class="bx--dropdown__profile-dropdown__container">
                      <a class="bx--link" href="javascript:void(0)">Profile</a>
                      <p>|</p>
                      <a class="bx--link" href="javascript:void(0)">Log Out</a>
                    </div>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  <!-- End Super Global Header -->

  <!-- Global Header -->
  <header role="banner" class="bx--global-header">
    <div class="bx--global-header__left-container">
      <div class="bx--left-nav__trigger bx--left-nav__trigger--apps" data-left-nav-toggle="open" tabindex="0">
        <div class="bx--left-nav__trigger--btn">
          <span></span>
        </div>
      </div>
      <div class="bx--global-header__left-nav bx--left-nav--active" data-left-nav-container aria-expanded="false">
        <div class="bx--left-nav__close-row"></div>
        <div data-left-nav-current-section="apps" class="bx--left-nav__header">
          <svg data-left-nav-current-section-icon="apps" class="bx--left-nav__header--taxonomy-icon">
            <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
          </svg>
          <a data-left-nav-current-section-title tabindex="0" class="bx--left-nav__header--title">Apps</a>
        </div>
        <nav class="bx--left-nav" data-left-nav role="navigation" aria-label="Left Navigation">
          <ul data-left-nav-sections class="bx--left-nav__sections">
            <li data-left-nav-section="services" class="bx--left-nav__section bx--left-nav__section--services">
              <a href="javascript:void(0)" class="bx--left-nav__section--anchor" tabindex="0">
                <svg data-left-nav-section-icon="services" class="bx--left-nav__section--taxonomy-icon">
                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
                </svg>
                <span data-left-nav-section-link class="bx--left-nav__section--link">Services</span>
              </a>
            </li>
            <li data-left-nav-section="infrastructure" class="bx--left-nav__section bx--left-nav__section--infrastructure" tabindex="0">
              <a href="javascript:void(0)" class="bx--left-nav__section--anchor" tabindex="0">
                <svg data-left-nav-section-icon="infrastructure" class="bx--left-nav__section--taxonomy-icon">
                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
                </svg>
                <span data-left-nav-section-link class="bx--left-nav__section--link">Infrastructure</span>
              </a>
            </li>
          </ul>
          <!-- APPLICATIONS MENU -->
          <ul role="menubar" class="bx--left-nav__main-nav" data-left-nav-list="apps" aria-hidden="false">
            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item data-left-nav-item-with-children tabindex="0">
              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
                <svg class="bx--parent-item__link--taxonomy-icon">
                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
                </svg>
                Example Parent Item
                <div class="bx--parent-item__link--down-icon">
                  <svg>
                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--down"></use>
                  </svg>
                </div>
              </a>
              <ul role="menu" class="bx--main-nav__nested-list" aria-hidden="true" data-left-nav-nested-list>
                <li role="menuitem" class="bx--nested-list__item bx--active-list-item" data-left-nav-nested-item tabindex="-1">
                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
                </li>
                <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item tabindex="-1">
                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
                </li>
                <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item data-left-nav-has-flyout tabindex="-1" aria-haspopup="true">
                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item
                    <div class="bx--nested-list__item--icon">
                      <svg>
                        <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--right"></use>
                      </svg>
                    </div>
                  </a>
                  <ul role="menu" class="bx--nested-list__flyout-menu" data-left-nav-flyout aria-hidden="true">
                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
                    </li>
                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
                    </li>
                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
                    </li>
                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
                <svg class="bx--parent-item__link--taxonomy-icon">
                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
                </svg>
                Example Parent Item
              </a>
            </li>
            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
                <svg class="bx--parent-item__link--taxonomy-icon">
                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
                </svg>
                Example Parent Item
              </a>
            </li>
            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
                <svg class="bx--parent-item__link--taxonomy-icon">
                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
                </svg>
                Example Parent Item
              </a>
            </li>
          </ul>
          <!-- END APPLICATIONS MENU -->

          <!-- SERVICES MENU -->
          <ul role="menubar" class="bx--left-nav__main-nav bx--left-nav__main-nav--hidden bx--left-nav__main-nav--top" data-left-nav-list="services" aria-hidden="true">
            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item data-left-nav-item-with-children tabindex="0">
              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
                <svg class="bx--parent-item__link--taxonomy-icon">
                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
                </svg>
                Example Parent Item
                <div class="bx--parent-item__link--down-icon">
                  <svg>
                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--down"></use>
                  </svg>
                </div>
              </a>
              <ul role="menu" class="bx--main-nav__nested-list" aria-hidden="true" data-left-nav-nested-list>
                <li role="menuitem" class="bx--nested-list__item bx--active-list-item" data-left-nav-nested-item tabindex="-1">
                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
                </li>
                <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item tabindex="-1">
                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
                </li>
                <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item data-left-nav-has-flyout tabindex="-1" aria-haspopup="true">
                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item
                    <div class="bx--nested-list__item--icon">
                      <svg>
                        <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--right"></use>
                      </svg>
                    </div>
                  </a>
                  <ul role="menu" class="bx--nested-list__flyout-menu" data-left-nav-flyout aria-hidden="true">
                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
                    </li>
                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
                    </li>
                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
                    </li>
                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" aria-haspopup="true" data-left-nav-item-link>
                <svg class="bx--parent-item__link--taxonomy-icon">
                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
                </svg>
                Example Parent Item
              </a>
            </li>
            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
                <svg class="bx--parent-item__link--taxonomy-icon">
                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
                </svg>
                Example Parent Item
              </a>
            </li>
            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
                <svg class="bx--parent-item__link--taxonomy-icon">
                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
                </svg>
                Example Parent Item
              </a>
            </li>
          </ul>
          <!-- END SERVICES MENU -->

          <!-- INFRASTRUCTURE MENU -->
          <ul role="menubar" class="bx--left-nav__main-nav bx--left-nav__main-nav--hidden bx--left-nav__main-nav--top" data-left-nav-list="infrastructure" aria-hidden="true">
            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item data-left-nav-item-with-children tabindex="0">
              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
                <svg class="bx--parent-item__link--taxonomy-icon">
                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
                </svg>
                Example Parent Item
                <div class="bx--parent-item__link--down-icon">
                  <svg>
                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--down"></use>
                  </svg>
                </div>
              </a>
              <ul role="menu" class="bx--main-nav__nested-list" aria-hidden="true" data-left-nav-nested-list>
                <li role="menuitem" class="bx--nested-list__item bx--active-list-item" data-left-nav-nested-item tabindex="-1">
                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
                </li>
                <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item tabindex="-1">
                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
                </li>
                <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item data-left-nav-has-flyout tabindex="-1" aria-haspopup="true">
                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item
                    <div class="bx--nested-list__item--icon">
                      <svg>
                        <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--right"></use>
                      </svg>
                    </div>
                  </a>
                  <ul role="menu" class="bx--nested-list__flyout-menu" data-left-nav-flyout aria-hidden="true">
                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
                    </li>
                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
                    </li>
                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
                    </li>
                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" aria-haspopup="true" data-left-nav-item-link>
                <svg class="bx--parent-item__link--taxonomy-icon">
                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
                </svg>
                Example Parent Item
              </a>
            </li>
            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
                <svg class="bx--parent-item__link--taxonomy-icon">
                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
                </svg>
                Example Parent Item
              </a>
            </li>
            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
                <svg class="bx--parent-item__link--taxonomy-icon">
                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
                </svg>
                Example Parent Item
              </a>
            </li>
          </ul>
          <!-- END INFRASTRUCTURE MENU -->

        </nav>
      </div>


    <div class="bx--global-header__title">
      <a href="#" class="bx--global-header__title--logo" tabindex="0">
        <img class="bx--logo__image" src="/globals/assets/bluemix-logo.svg"></img>
        <h1 class="bx--logo__text">
          IBM <span class="bx--logo__text--bold">Bluemix</span>
        </h1>
      </a>
      <h4 class="bx--global-header__title--current-page">Apps</h4>
    </div>
    </div>

    <!-- Global Header - Right Nav -->
    <div class="bx--global-header__right-container">
    <ul data-global-header-menu role="menubar" class="bx--global-header__menu" aria-hidden="false">
      <li role="menuitem" class="bx--global-header__menu__item">
        <a class="bx--global-header__menu__item--link" tabindex="0" href="javascript:void(0)">Catalog</a>
      </li>
      <li role="menuitem" class="bx--global-header__menu__item">
        <a class="bx--global-header__menu__item--link" tabindex="0" href="javascript:void(0)">Support</a>
      </li>
      <li role="menuitem" class="bx--global-header__menu__item">
        <ul role="menu" data-dropdown data-dropdown-type="navigation" class="bx--dropdown" tabindex="0">
          <li class="bx--dropdown-text">Account</li>
          <li aria-haspopup="true">
            <ul role="menu" aria-hidden="true" class="bx--dropdown-list">
              <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Make A Payment</a></li>
              <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">Sales</a></li>
              <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">Billing</a></li>
              <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">Users</a></li>
              <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">VPN Access</a></li>
              <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">Manage</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    </div>
  </header>
  <!-- End Global Header -->

</div>
<!-- End Unified Header -->