Origami Frontend Components & Services

Demos: o-header

Header

Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

<header class="o-header" data-o-component="o-header" data-o-header--no-js>
  <div class="o-header__row o-header__anon">
    <ul class="o-header__anon-list">
      <li class="o-header__anon-item">
        <a class="o-header__anon-link" href="#">Subscribe</a>
      </li>
      <li class="o-header__anon-item">
        <a class="o-header__anon-link" href="#">Sign In</a>
      </li>
    </ul>
  </div>

  <div class="o-header__row o-header__top">
    <div class="o-header__container">
      <div class="o-header__top-wrapper">
        <div class="o-header__top-column o-header__top-column--left">
          <a
            href="#o-header-drawer"
            class="o-header__top-link o-header__top-link--menu"
            aria-controls="o-header-drawer"
            title="Open side navigation menu"
          >
            <span class="o-header__top-link-label"
              >Open side navigation menu</span
            >
          </a>
        </div>
        <div class="o-header__top-column o-header__top-column--center">
          <a
            class="o-header__top-logo"
            href="/"
            title="Go to Financial Times homepage"
          >
            <span class="o-header__visually-hidden">Financial Times</span>
          </a>
        </div>
        <div class="o-header__top-column o-header__top-column--right">
          <a
            class="o-header__top-link o-header__top-link--myft"
            href="/myft"
            aria-label="My F T"
          >
            <span class="o-header__visually-hidden">myFT</span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- To support both core and enhanced, duplicating the search row is necessary to avoid it flashing in enhanced -->
  <!-- Pick only one of the two <div> if you don't need to support both core and enhanced -->
  <div
    id="o-header-search"
    class="o-header__row o-header__search o--if-no-js"
    role="search"
  >
    <div class="o-header__container">
      <form
        class="o-header__search-form"
        action="/search"
        role="search"
        aria-label="Site search"
      >
        <label class="o-header__visually-hidden" for="o-header-search-term"
          >Search the <abbr title="Financial Times">FT</abbr></label
        >
        <input
          class="o-header__search-term"
          id="o-header-search-term"
          name="q"
          type="text"
          placeholder="Search the FT"
        />
        <button class="o-header__search-submit" type="submit">Search</button>
      </form>
    </div>
  </div>
  <div
    id="o-header-search-js"
    class="o-header__row o-header__search"
    role="search"
    data-o-header-search
  >
    <div class="o-header__container">
      <form
        class="o-header__search-form"
        action="/search"
        role="search"
        aria-label="Site search"
      >
        <label class="o-header__visually-hidden" for="o-header-search-term-js"
          >Search the <abbr title="Financial Times">FT</abbr></label
        >
        <input
          class="o-header__search-term"
          id="o-header-search-term-js"
          name="q"
          type="text"
          placeholder="Search the FT"
        />
        <button class="o-header__search-submit" type="submit">Search</button>
        <button
          class="o-header__search-close o--if-js"
          type="button"
          aria-controls="o-header-search-js"
          title="Close search bar"
        >
          <span class="o-header__visually-hidden">Close search bar</span>
        </button>
      </form>
    </div>
  </div>

  <nav
    id="o-header-nav-mobile"
    class="o-header__row o-header__nav o-header__nav--mobile"
    role="navigation"
    aria-label="Main navigation"
  >
    <ul class="o-header__nav-list">
      <li class="o-header__nav-item">
        <a
          class="o-header__nav-link o-header__nav-link--primary"
          href
          aria-label="xxxx, current page"
          aria-current="page"
          >xxxx</a
        >
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >xxxxxx</a
        >
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >xxxxxxx xxxx</a
        >
      </li>
    </ul>
  </nav>

  <nav
    id="o-header-nav-desktop"
    class="o-header__row o-header__nav o-header__nav--desktop"
    role="navigation"
    aria-label="Main navigation"
  >
    <div class="o-header__container">
      <ul class="o-header__nav-list o-header__nav-list--left">
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            aria-label="xxxx, current page"
            aria-current="page"
            id="o-header-link-"
            >xxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxx x xxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxx x xxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxx xx xxxxx xx</a
          >
        </li>
      </ul>
      <ul class="o-header__nav-list o-header__nav-list--right">
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--utility"
            href="https://markets.ft.com/data/portfolio/dashboard"
            >Portfolio</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--utility"
            href="https://myaccount.ft.com/details/core/view"
            >My Account</a
          >
        </li>
      </ul>
    </div>
  </nav>
</header>

<div
  class="o-header__drawer"
  id="o-header-drawer"
  role="navigation"
  aria-label="Drawer menu"
  data-o-header-drawer
  data-o-header-drawer--no-js
>
  <div class="o-header__drawer-inner">
    <div class="o-header__drawer-tools">
      <a class="o-header__drawer-tools-logo" href="/">
        <span class="o-header__visually-hidden">Financial Times</span>
      </a>
      <button
        type="button"
        class="o-header__drawer-tools-close"
        aria-controls="o-header-drawer"
        title="Close drawer menu"
      >
        <span class="o-header__visually-hidden">Close drawer menu</span>
      </button>
      <p class="o-header__drawer-current-edition">UK Edition</p>
    </div>

    <div class="o-header__drawer-search">
      <form
        class="o-header__drawer-search-form"
        action="/search"
        role="search"
        aria-label="Site search"
      >
        <label
          class="o-header__visually-hidden"
          for="o-header-drawer-search-term"
          >Search the <abbr title="Financial Times">FT</abbr></label
        >
        <input
          class="o-header__drawer-search-term"
          id="o-header-drawer-search-term"
          name="q"
          type="text"
          autocomplete="off"
          autocorrect="off"
          autocapitalize="off"
          spellcheck="false"
          placeholder="Search the FT"
        />
        <button class="o-header__drawer-search-submit" type="submit">
          <span class="o-header__visually-hidden">Search</span>
        </button>
      </form>
    </div>

    <nav class="o-header__drawer-menu" aria-label="Edition switcher">
      <ul class="o-header__drawer-menu-list">
        <li class="o-header__drawer-menu-item"></li>
        <a class="o-header__drawer-menu-link" href="/?edition=international"
          >Switch to International Edition</a
        >
      </ul>
    </nav>

    <nav class="o-header__drawer-menu o-header__drawer-menu--primary">
      <ul class="o-header__drawer-menu-list">
        <li
          class="o-header__drawer-menu-item o-header__drawer-menu-item--heading"
        >
          xxx xxxxxxxx
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--selected"
            href="#"
            aria-label="xxxx, current page"
            aria-current="page"
            >xxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-1"
            >
              Show more xxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-1"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx xxxx xxx xxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-2"
            >
              Show more xx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-2"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx xxxxxxxx x xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx xxxxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-3"
            >
              Show more xxxxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-3"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx x xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-4"
            >
              Show more xxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-4"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxx xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxx xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-5"
            >
              Show more xxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-5"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxx xxx xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxx x xxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-6"
            >
              Show more xxxx x xxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-6"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx xxxxxx xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx xxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx xxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxx x xxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-7"
            >
              Show more xxxx x xxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-7"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx x xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxx x xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx xx x xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxxxxx xxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-8"
            >
              Show more xxxxxxxx xxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-8"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx x xxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx x xxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxx x xxxxxxxxxxx</a
          >
        </li>
        <li
          class="o-header__drawer-menu-item o-header__drawer-menu-item--heading"
        >
          xx xxxxxxxxxx
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxxxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxx xxxx xxx xx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxx xxxxxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxx xxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxxxxxx</a
          >
        </li>
        <li
          class="o-header__drawer-menu-item o-header__drawer-menu-item--divide"
        >
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected"
            href="#"
            >xx xx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxx xxxxx</a
          >
        </li>
      </ul>
    </nav>

    <nav class="o-header__drawer-menu o-header__drawer-menu--user">
      <ul class="o-header__drawer-menu-list">
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link"
            href="/products?segID=400863&amp;segmentID=190b4443-dc03-bd53-e79b-b4b6fbd04e64"
            >Subscribe</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a class="o-header__drawer-menu-link" href="/login">Sign In</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

Mega menu

Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

<header class="o-header" data-o-component="o-header" data-o-header--no-js>
  <nav
    id="o-header-nav-mobile"
    class="o-header__row o-header__nav o-header__nav--mobile"
    role="navigation"
    aria-label="Main navigation"
  >
    <ul class="o-header__nav-list">
      <li class="o-header__nav-item">
        <a
          class="o-header__nav-link o-header__nav-link--primary"
          href
          aria-label="xxxx, current page"
          aria-current="page"
          >xxxx</a
        >
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >xxxxxx</a
        >
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >xxxxxxx xxxx</a
        >
      </li>
    </ul>
  </nav>

  <nav
    id="o-header-nav-desktop"
    class="o-header__row o-header__nav o-header__nav--desktop"
    role="navigation"
    aria-label="Main navigation"
  >
    <div class="o-header__container">
      <ul class="o-header__nav-list o-header__nav-list--left">
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            aria-label="xxxx, current page"
            aria-current="page"
            id="o-header-link-0"
            >xxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-1"
            aria-controls="o-header-mega-1"
            >xxxxx</a
          >
          <div
            class="o-header__mega"
            id="o-header-mega-1"
            role="group"
            aria-labelledby="o-header-link-1"
            data-o-header-mega
          >
            <div class="o-header__container">
              <div class="o-header__mega-wrapper">
                <div
                  class="o-header__mega-column o-header__mega-column--subsections"
                >
                  <div class="o-header__mega-heading">Sub-sections</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxx xxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxx xxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxx xxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxx xxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxxxxx xxxx xxx xxxxxx
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxxxxxxx xxxxxxx
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxxxxxx x xxxxxxxxxxx
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  class="o-header__mega-column o-header__mega-column--articles"
                >
                  <div class="o-header__mega-heading">Top Stories</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          The UK expats voting for Brexit no matter what the
                          cost
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Lunch with the FT: Adair Turner
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          English carpenter who makes beehives that sell across
                          the world
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          French ambassador urges UK to help shape a
                          &#x2018;reformed Europe&#x2019;
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Where do politicians live? How MPs across the world
                          find city digs
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-2"
            aria-controls="o-header-mega-2"
            >xx</a
          >
          <div
            class="o-header__mega"
            id="o-header-mega-2"
            role="group"
            aria-labelledby="o-header-link-2"
            data-o-header-mega
          >
            <div class="o-header__container">
              <div class="o-header__mega-wrapper">
                <div
                  class="o-header__mega-column o-header__mega-column--subsections"
                >
                  <div class="o-header__mega-heading">Sub-sections</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxx xx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xx xxxxxxxx x xxxxxx
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xx xxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xx xxxxxxx </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  class="o-header__mega-column o-header__mega-column--articles"
                >
                  <div class="o-header__mega-heading">Top Stories</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          The UK expats voting for Brexit no matter what the
                          cost
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Lunch with the FT: Adair Turner
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          English carpenter who makes beehives that sell across
                          the world
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          French ambassador urges UK to help shape a
                          &#x2018;reformed Europe&#x2019;
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Where do politicians live? How MPs across the world
                          find city digs
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-3"
            aria-controls="o-header-mega-3"
            >xxxxxxxxx</a
          >
          <div
            class="o-header__mega"
            id="o-header-mega-3"
            role="group"
            aria-labelledby="o-header-link-3"
            data-o-header-mega
          >
            <div class="o-header__container">
              <div class="o-header__mega-wrapper">
                <div
                  class="o-header__mega-column o-header__mega-column--subsections"
                >
                  <div class="o-header__mega-heading">Sub-sections</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxx xxxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxxxxx x xxxxxxxx
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxxx </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  class="o-header__mega-column o-header__mega-column--articles"
                >
                  <div class="o-header__mega-heading">Top Stories</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          The UK expats voting for Brexit no matter what the
                          cost
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Lunch with the FT: Adair Turner
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          English carpenter who makes beehives that sell across
                          the world
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          French ambassador urges UK to help shape a
                          &#x2018;reformed Europe&#x2019;
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Where do politicians live? How MPs across the world
                          find city digs
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-4"
            aria-controls="o-header-mega-4"
            >xxxxxxx</a
          >
          <div
            class="o-header__mega"
            id="o-header-mega-4"
            role="group"
            aria-labelledby="o-header-link-4"
            data-o-header-mega
          >
            <div class="o-header__container">
              <div class="o-header__mega-wrapper">
                <div
                  class="o-header__mega-column o-header__mega-column--subsections"
                >
                  <div class="o-header__mega-heading">Sub-sections</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxx xxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxx xxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxxxxxx xxxxxxx
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxx </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  class="o-header__mega-column o-header__mega-column--articles"
                >
                  <div class="o-header__mega-heading">Top Stories</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          The UK expats voting for Brexit no matter what the
                          cost
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Lunch with the FT: Adair Turner
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          English carpenter who makes beehives that sell across
                          the world
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          French ambassador urges UK to help shape a
                          &#x2018;reformed Europe&#x2019;
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Where do politicians live? How MPs across the world
                          find city digs
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-5"
            aria-controls="o-header-mega-5"
            >xxxxxxx</a
          >
          <div
            class="o-header__mega"
            id="o-header-mega-5"
            role="group"
            aria-labelledby="o-header-link-5"
            data-o-header-mega
          >
            <div class="o-header__container">
              <div class="o-header__mega-wrapper">
                <div
                  class="o-header__mega-column o-header__mega-column--subsections"
                >
                  <div class="o-header__mega-heading">Sub-sections</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxx xxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xx xxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxx xxx xxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxxxx </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  class="o-header__mega-column o-header__mega-column--articles"
                >
                  <div class="o-header__mega-heading">Top Stories</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          The UK expats voting for Brexit no matter what the
                          cost
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Lunch with the FT: Adair Turner
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          English carpenter who makes beehives that sell across
                          the world
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          French ambassador urges UK to help shape a
                          &#x2018;reformed Europe&#x2019;
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Where do politicians live? How MPs across the world
                          find city digs
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-6"
            aria-controls="o-header-mega-6"
            >xxxx x xxxxxxx</a
          >
          <div
            class="o-header__mega"
            id="o-header-mega-6"
            role="group"
            aria-labelledby="o-header-link-6"
            data-o-header-mega
          >
            <div class="o-header__container">
              <div class="o-header__mega-wrapper">
                <div
                  class="o-header__mega-column o-header__mega-column--subsections"
                >
                  <div class="o-header__mega-heading">Sub-sections</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxx xxxx x xxxxxx
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxxxxxxx xxxxxxxxx
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxxxxxxxxxxxxxxx
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxx xxxxx </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  class="o-header__mega-column o-header__mega-column--articles"
                >
                  <div class="o-header__mega-heading">Top Stories</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          The UK expats voting for Brexit no matter what the
                          cost
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Lunch with the FT: Adair Turner
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          English carpenter who makes beehives that sell across
                          the world
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          French ambassador urges UK to help shape a
                          &#x2018;reformed Europe&#x2019;
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Where do politicians live? How MPs across the world
                          find city digs
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-7"
            aria-controls="o-header-mega-7"
            >xxxx x xxxx</a
          >
          <div
            class="o-header__mega"
            id="o-header-mega-7"
            role="group"
            aria-labelledby="o-header-link-7"
            data-o-header-mega
          >
            <div class="o-header__container">
              <div class="o-header__mega-wrapper">
                <div
                  class="o-header__mega-column o-header__mega-column--subsections"
                >
                  <div class="o-header__mega-heading">Sub-sections</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxx xxxx x xxxx
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxx x xxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxx x xxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxxxx xx x xxxxx
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  class="o-header__mega-column o-header__mega-column--articles"
                >
                  <div class="o-header__mega-heading">Top Stories</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          The UK expats voting for Brexit no matter what the
                          cost
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Lunch with the FT: Adair Turner
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          English carpenter who makes beehives that sell across
                          the world
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          French ambassador urges UK to help shape a
                          &#x2018;reformed Europe&#x2019;
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Where do politicians live? How MPs across the world
                          find city digs
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <ul class="o-header__nav-list o-header__nav-list--right">
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--utility"
            href="/login"
            >Sign In</a
          >
        </li>
        <li class="o-header__nav-item">
          <a class="o-header__nav-button" href="/products">Subscribe</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

Header with subnav

Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

<header class="o-header" data-o-component="o-header" data-o-header--no-js>
  <nav
    id="o-header-nav-mobile"
    class="o-header__row o-header__nav o-header__nav--mobile"
    role="navigation"
    aria-label="Main navigation"
  >
    <ul class="o-header__nav-list">
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href>xxxx</a>
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >xxxxxx</a
        >
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >xxxxxxx xxxx</a
        >
      </li>
    </ul>
  </nav>

  <nav
    id="o-header-nav-desktop"
    class="o-header__row o-header__nav o-header__nav--desktop"
    role="navigation"
    aria-label="Main navigation"
  >
    <div class="o-header__container">
      <ul class="o-header__nav-list o-header__nav-list--left">
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxx x xxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxx x xxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxx xx xxxxx xx</a
          >
        </li>
      </ul>
      <ul class="o-header__nav-list o-header__nav-list--right">
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--utility"
            href="https://markets.ft.com/data/portfolio/dashboard"
            >Portfolio</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--utility"
            href="https://myaccount.ft.com/details/core/view"
            >My Account</a
          >
        </li>
      </ul>
    </div>
  </nav>

  <div
    class="o-header__subnav"
    role="navigation"
    aria-label="Sub navigation"
    data-o-header-subnav
  >
    <div class="o-header__container">
      <div class="o-header__subnav-wrap-outside">
        <div class="o-header__subnav-wrap-inside" data-o-header-subnav-wrapper>
          <div class="o-header__subnav-content">
            <ol
              class="o-header__subnav-list o-header__subnav-list--breadcrumb"
              aria-label="Breadcrumb"
            >
              <li class="o-header__subnav-item">
                <a class="o-header__subnav-link" href="#"> xxxxx </a>
              </li>
              <li class="o-header__subnav-item">
                <a
                  class="o-header__subnav-link"
                  href
                  aria-current="page"
                  aria-label="xx x xxxxxx, current page"
                >
                  xx x xxxxxx
                </a>
              </li>
            </ol>

            <ul
              class="o-header__subnav-list o-header__subnav-list--children"
              aria-label="Subsections"
            >
              <li class="o-header__subnav-item">
                <a class="o-header__subnav-link" href="#"> xx xxxxxxx </a>
              </li>
              <li class="o-header__subnav-item">
                <a class="o-header__subnav-link" href="#">
                  xx xxxxxxxx x xxxxxx
                </a>
              </li>
              <li class="o-header__subnav-item">
                <a class="o-header__subnav-link" href="#"> xx xxxxxxxxx </a>
              </li>
            </ul>
          </div>
        </div>
        <button
          class="o-header__subnav-button o-header__subnav-button--left"
          aria-hidden="true"
          disabled
        ></button>
        <button
          class="o-header__subnav-button o-header__subnav-button--right"
          aria-hidden="true"
          disabled
        ></button>
      </div>
    </div>
  </div>
</header>

Header with subnav and right aligned items

The subnav may have right aligned actions, for example to sign out of an admin area. Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

<header class="o-header" data-o-component="o-header" data-o-header--no-js>
  <nav
    id="o-header-nav-mobile"
    class="o-header__row o-header__nav o-header__nav--mobile"
    role="navigation"
    aria-label="Main navigation"
  >
    <ul class="o-header__nav-list">
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href>xxxx</a>
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >xxxxxx</a
        >
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >xxxxxxx xxxx</a
        >
      </li>
    </ul>
  </nav>

  <nav
    id="o-header-nav-desktop"
    class="o-header__row o-header__nav o-header__nav--desktop"
    role="navigation"
    aria-label="Main navigation"
  >
    <div class="o-header__container">
      <ul class="o-header__nav-list o-header__nav-list--left">
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxx x xxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxx x xxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxx xx xxxxx xx</a
          >
        </li>
      </ul>
      <ul class="o-header__nav-list o-header__nav-list--right">
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--utility"
            href="https://markets.ft.com/data/portfolio/dashboard"
            >Portfolio</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--utility"
            href="https://myaccount.ft.com/details/core/view"
            >My Account</a
          >
        </li>
      </ul>
    </div>
  </nav>

  <div
    class="o-header__subnav"
    role="navigation"
    aria-label="Sub navigation"
    data-o-header-subnav
  >
    <div class="o-header__container">
      <div class="o-header__subnav-wrap-outside">
        <div class="o-header__subnav-wrap-inside" data-o-header-subnav-wrapper>
          <div class="o-header__subnav-content">
            <ol
              class="o-header__subnav-list o-header__subnav-list--breadcrumb"
              aria-label="Breadcrumb"
            >
              <li class="o-header__subnav-item">
                <a class="o-header__subnav-link" href="#"> xxxxx </a>
              </li>
              <li class="o-header__subnav-item">
                <a
                  class="o-header__subnav-link"
                  href
                  aria-current="page"
                  aria-label="xx x xxxxxx, current page"
                >
                  xx x xxxxxx
                </a>
              </li>
            </ol>

            <ul
              class="o-header__subnav-list o-header__subnav-list--children"
              aria-label="Subsections"
            >
              <li class="o-header__subnav-item">
                <a class="o-header__subnav-link" href="#"> xx xxxxxxx </a>
              </li>
              <li class="o-header__subnav-item">
                <a class="o-header__subnav-link" href="#">
                  xx xxxxxxxx x xxxxxx
                </a>
              </li>
              <li class="o-header__subnav-item">
                <a class="o-header__subnav-link" href="#"> xx xxxxxxxxx </a>
              </li>
            </ul>

            <ul
              class="o-header__subnav-list o-header__subnav-list--children o-header__subnav-list--right"
              aria-label="Actions"
            >
              <li class="o-header__subnav-item">
                <a class="o-header__subnav-link" href="#"> xxxx xxx </a>
              </li>
            </ul>
          </div>
        </div>
        <button
          class="o-header__subnav-button o-header__subnav-button--left"
          aria-hidden="true"
          disabled
        ></button>
        <button
          class="o-header__subnav-button o-header__subnav-button--right"
          aria-hidden="true"
          disabled
        ></button>
      </div>
    </div>
  </div>
</header>

Simple header

Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

<header
  class="o-header o-header--simple"
  data-o-component="o-header"
  data-o-header--no-js
>
  <div class="o-header__row o-header__top">
    <div class="o-header__container">
      <div class="o-header__top-wrapper">
        <div class="o-header__top-column o-header__top-column--left">
          <a
            href="#o-header-search"
            class="o-header__top-link o-header__top-link--search"
            aria-controls="o-header-search"
            title="Open search bar"
          >
            <span class="o-header__top-link-label">Open search bar</span>
          </a>
        </div>

        <div class="o-header__top-column o-header__top-column--center">
          <!--<div class="o-header__top-takeover"></div>-->
          <a
            class="o-header__top-logo"
            href="/"
            title="Go to Financial Times homepage"
          >
            <span class="o-header__visually-hidden">Financial Times</span>
          </a>
        </div>

        <div class="o-header__top-column o-header__top-column--right">
          <!--<div class="o-header__top-takeover"></div>-->
          <a
            class="o-header__top-link o-header__top-link--myft"
            href="/myft"
            aria-label="My F T"
          >
            <span class="o-header__visually-hidden">myFT</span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <div
    id="o-header-search"
    class="o-header__row o-header__search o--if-js"
    role="search"
    data-o-header-search
  >
    <div class="o-header__container">
      <form
        class="o-header__search-form"
        action="/search"
        role="search"
        aria-label="Site search"
      >
        <label class="o-header__visually-hidden" for="o-header-search-term-js"
          >Search the <abbr title="Financial Times">FT</abbr></label
        >
        <input
          class="o-header__search-term"
          id="o-header-search-term-js"
          name="q"
          type="text"
          placeholder="Search the FT"
        />
        <button class="o-header__search-submit" type="submit">Search</button>
        <button
          class="o-header__search-close"
          type="button"
          aria-controls="o-header-search"
          title="Close search bar"
        >
          <span class="o-header__visually-hidden">Close search bar</span>
        </button>
      </form>
    </div>
  </div>
</header>

<div
  class="o-header__drawer"
  id="o-header-drawer"
  role="navigation"
  aria-label="Drawer menu"
  data-o-header-drawer
  data-o-header-drawer--no-js
>
  <div class="o-header__drawer-inner">
    <div class="o-header__drawer-tools">
      <a class="o-header__drawer-tools-logo" href="/">
        <span class="o-header__visually-hidden">Financial Times</span>
      </a>
      <button
        type="button"
        class="o-header__drawer-tools-close"
        aria-controls="o-header-drawer"
        title="Close drawer menu"
      >
        <span class="o-header__visually-hidden">Close drawer menu</span>
      </button>
      <p class="o-header__drawer-current-edition">UK Edition</p>
    </div>

    <div class="o-header__drawer-search">
      <form
        class="o-header__drawer-search-form"
        action="/search"
        role="search"
        aria-label="Site search"
      >
        <label
          class="o-header__visually-hidden"
          for="o-header-drawer-search-term"
          >Search the <abbr title="Financial Times">FT</abbr></label
        >
        <input
          class="o-header__drawer-search-term"
          id="o-header-drawer-search-term"
          name="q"
          type="text"
          autocomplete="off"
          autocorrect="off"
          autocapitalize="off"
          spellcheck="false"
          placeholder="Search the FT"
        />
        <button class="o-header__drawer-search-submit" type="submit">
          <span class="o-header__visually-hidden">Search</span>
        </button>
      </form>
    </div>

    <nav class="o-header__drawer-menu" aria-label="Edition switcher">
      <ul class="o-header__drawer-menu-list">
        <li class="o-header__drawer-menu-item"></li>
        <a class="o-header__drawer-menu-link" href="/?edition=international"
          >Switch to International Edition</a
        >
      </ul>
    </nav>

    <nav class="o-header__drawer-menu o-header__drawer-menu--primary">
      <ul class="o-header__drawer-menu-list">
        <li
          class="o-header__drawer-menu-item o-header__drawer-menu-item--heading"
        >
          xxx xxxxxxxx
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--selected"
            href="#"
            aria-label="xxxx, current page"
            aria-current="page"
            >xxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-1"
            >
              Show more xxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-1"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx xxxx xxx xxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-2"
            >
              Show more xx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-2"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx xxxxxxxx x xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx xxxxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-3"
            >
              Show more xxxxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-3"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx x xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-4"
            >
              Show more xxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-4"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxx xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxx xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-5"
            >
              Show more xxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-5"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxx xxx xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxx x xxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-6"
            >
              Show more xxxx x xxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-6"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx xxxxxx xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx xxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx xxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxx x xxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-7"
            >
              Show more xxxx x xxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-7"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx x xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxx x xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx xx x xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxxxxx xxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-8"
            >
              Show more xxxxxxxx xxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-8"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx x xxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx x xxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxx x xxxxxxxxxxx</a
          >
        </li>
        <li
          class="o-header__drawer-menu-item o-header__drawer-menu-item--heading"
        >
          xx xxxxxxxxxx
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxxxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxx xxxx xxx xx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxx xxxxxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxx xxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxxxxxx</a
          >
        </li>
        <li
          class="o-header__drawer-menu-item o-header__drawer-menu-item--divide"
        >
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected"
            href="#"
            >xx xx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxx xxxxx</a
          >
        </li>
      </ul>
    </nav>

    <nav class="o-header__drawer-menu o-header__drawer-menu--user">
      <ul class="o-header__drawer-menu-list">
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link"
            href="/products?segID=400863&amp;segmentID=190b4443-dc03-bd53-e79b-b4b6fbd04e64"
            >Subscribe</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a class="o-header__drawer-menu-link" href="/login">Sign In</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

Simple transparent (inverse) header

The "transparent" header is useful for use on dark backgrounds. This variant doesn't support the drawer. Please speak to Origami if you would like to add drawer support to this variant. Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

<header
  class="o-header o-header--transparent o-header--simple"
  data-o-component="o-header"
  data-o-header--no-js
>
  <div class="o-header__row o-header__anon">
    <ul class="o-header__anon-list">
      <li class="o-header__anon-item">
        <a class="o-header__anon-link" href="#">Subscribe</a>
      </li>
      <li class="o-header__anon-item">
        <a class="o-header__anon-link" href="#">Sign In</a>
      </li>
    </ul>
  </div>

  <div class="o-header__row o-header__top">
    <div class="o-header__container">
      <div class="o-header__top-wrapper">
        <div class="o-header__top-column o-header__top-column--left"></div>
        <div class="o-header__top-column o-header__top-column--center">
          <a
            class="o-header__top-logo"
            href="/"
            title="Go to Financial Times homepage"
          >
            <span class="o-header__visually-hidden">Financial Times</span>
          </a>
        </div>
        <div class="o-header__top-column o-header__top-column--right"></div>
      </div>
    </div>
  </div>

  <nav
    id="o-header-nav-mobile"
    class="o-header__row o-header__nav o-header__nav--mobile"
    role="navigation"
    aria-label="Main navigation"
  >
    <ul class="o-header__nav-list">
      <li class="o-header__nav-item">
        <a
          class="o-header__nav-link o-header__nav-link--primary"
          href
          aria-label="xxxx, current page"
          aria-current="page"
          >xxxx</a
        >
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >xxxxxx</a
        >
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >xxxxxxx xxxx</a
        >
      </li>
    </ul>
  </nav>

  <nav
    id="o-header-nav-desktop"
    class="o-header__row o-header__nav o-header__nav--desktop"
    role="navigation"
    aria-label="Main navigation"
  >
    <div class="o-header__container">
      <ul class="o-header__nav-list o-header__nav-list--left">
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            aria-label="xxxx, current page"
            aria-current="page"
            id="o-header-link-"
            >xxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxx x xxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxx x xxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxx xx xxxxx xx</a
          >
        </li>
      </ul>
      <ul class="o-header__nav-list o-header__nav-list--right">
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--utility"
            href="https://markets.ft.com/data/portfolio/dashboard"
            >Portfolio</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--utility"
            href="https://myaccount.ft.com/details/core/view"
            >My Account</a
          >
        </li>
      </ul>
    </div>
  </nav>
</header>

Sticky header

Sticky variation of the simple header. Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

<header
  class="o-header o-header--simple o-header--sticky o--if-js"
  aria-hidden="true"
  role="presentation"
  data-o-component="o-header"
  data-o-header--sticky
>
  <div class="o-header__row o-header__top">
    <div class="o-header__container">
      <div class="o-header__top-wrapper">
        <div class="o-header__top-column o-header__top-column--left">
          <a
            href="#o-header-search-sticky"
            class="o-header__top-link o-header__top-link--search"
            aria-controls="o-header-search-sticky"
            tabindex="-1"
          >
            <span class="o-header__top-link-label">Open search bar</span>
          </a>
        </div>

        <div class="o-header__top-column o-header__top-column--center">
          <!-- takeover content will show at the L breakpoint and hide all following siblings -->
          <div class="o-header__top-takeover">
            <div class="o-header__nav">
              <ul class="o-header__nav-list o-header__nav-list--left">
                <li class="o-header__nav-item">
                  <a
                    class="o-header__nav-link o-header__nav-link--primary"
                    href
                    aria-label="xxxx, current page"
                    aria-current="page"
                    tabindex="-1"
                    >xxxx</a
                  >
                </li>
                <li class="o-header__nav-item">
                  <a
                    class="o-header__nav-link o-header__nav-link--primary"
                    href
                    tabindex="-1"
                    >xxxxx</a
                  >
                </li>
                <li class="o-header__nav-item">
                  <a
                    class="o-header__nav-link o-header__nav-link--primary"
                    href
                    tabindex="-1"
                    >xx</a
                  >
                </li>
                <li class="o-header__nav-item">
                  <a
                    class="o-header__nav-link o-header__nav-link--primary"
                    href
                    tabindex="-1"
                    >xxxxxxxxx</a
                  >
                </li>
                <li class="o-header__nav-item">
                  <a
                    class="o-header__nav-link o-header__nav-link--primary"
                    href
                    tabindex="-1"
                    >xxxx</a
                  >
                </li>
                <li class="o-header__nav-item">
                  <a
                    class="o-header__nav-link o-header__nav-link--primary"
                    href
                    tabindex="-1"
                    >xxxxxxx</a
                  >
                </li>
                <li class="o-header__nav-item">
                  <a
                    class="o-header__nav-link o-header__nav-link--primary"
                    href
                    tabindex="-1"
                    >xxxxxxx</a
                  >
                </li>
                <li class="o-header__nav-item">
                  <a
                    class="o-header__nav-link o-header__nav-link--primary"
                    href
                    tabindex="-1"
                    >xxxx x xxxxxxx</a
                  >
                </li>
                <li class="o-header__nav-item">
                  <a
                    class="o-header__nav-link o-header__nav-link--primary"
                    href
                    tabindex="-1"
                    >xxxx x xxxx</a
                  >
                </li>
                <li class="o-header__nav-item">
                  <a
                    class="o-header__nav-link o-header__nav-link--primary"
                    href
                    tabindex="-1"
                    >xxxxxxxx</a
                  >
                </li>
                <li class="o-header__nav-item">
                  <a
                    class="o-header__nav-link o-header__nav-link--primary"
                    href
                    tabindex="-1"
                    >xxx xx xxxxx xx</a
                  >
                </li>
              </ul>
            </div>
          </div>

          <a
            class="o-header__top-logo"
            href="/"
            title="Go to Financial Times homepage"
            tabindex="-1"
          >
            <span class="o-header__visually-hidden">Financial Times</span>
          </a>
        </div>

        <div class="o-header__top-column o-header__top-column--right">
          <a
            class="o-header__top-link o-header__top-link--myft"
            href="/myft"
            aria-label="My F T"
            tabindex="-1"
          >
            <span class="o-header__visually-hidden">myFT</span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <div
    id="o-header-search-sticky"
    class="o-header__row o-header__search o--if-js"
    role="search"
    data-o-header-search
  >
    <div class="o-header__container">
      <form
        class="o-header__search-form"
        action="/search"
        role="search"
        aria-label="Site search"
      >
        <label class="o-header__visually-hidden" for="o-header-search-term-js"
          >Search the <abbr title="Financial Times">FT</abbr></label
        >
        <input
          class="o-header__search-term"
          id="o-header-search-term-js"
          name="q"
          type="text"
          placeholder="Search the FT"
        />
        <button class="o-header__search-submit" type="submit">Search</button>
        <button
          class="o-header__search-close"
          type="button"
          aria-controls="o-header-search-sticky"
          title="Close search bar"
        >
          <span class="o-header__visually-hidden">Close search bar</span>
        </button>
      </form>
    </div>
  </div>
</header>

<div
  class="o-header__drawer"
  id="o-header-drawer"
  role="navigation"
  aria-label="Drawer menu"
  data-o-header-drawer
  data-o-header-drawer--no-js
>
  <div class="o-header__drawer-inner">
    <div class="o-header__drawer-tools">
      <a class="o-header__drawer-tools-logo" href="/">
        <span class="o-header__visually-hidden">Financial Times</span>
      </a>
      <button
        type="button"
        class="o-header__drawer-tools-close"
        aria-controls="o-header-drawer"
        title="Close drawer menu"
      >
        <span class="o-header__visually-hidden">Close drawer menu</span>
      </button>
      <p class="o-header__drawer-current-edition">UK Edition</p>
    </div>

    <div class="o-header__drawer-search">
      <form
        class="o-header__drawer-search-form"
        action="/search"
        role="search"
        aria-label="Site search"
      >
        <label
          class="o-header__visually-hidden"
          for="o-header-drawer-search-term"
          >Search the <abbr title="Financial Times">FT</abbr></label
        >
        <input
          class="o-header__drawer-search-term"
          id="o-header-drawer-search-term"
          name="q"
          type="text"
          autocomplete="off"
          autocorrect="off"
          autocapitalize="off"
          spellcheck="false"
          placeholder="Search the FT"
        />
        <button class="o-header__drawer-search-submit" type="submit">
          <span class="o-header__visually-hidden">Search</span>
        </button>
      </form>
    </div>

    <nav class="o-header__drawer-menu" aria-label="Edition switcher">
      <ul class="o-header__drawer-menu-list">
        <li class="o-header__drawer-menu-item"></li>
        <a class="o-header__drawer-menu-link" href="/?edition=international"
          >Switch to International Edition</a
        >
      </ul>
    </nav>

    <nav class="o-header__drawer-menu o-header__drawer-menu--primary">
      <ul class="o-header__drawer-menu-list">
        <li
          class="o-header__drawer-menu-item o-header__drawer-menu-item--heading"
        >
          xxx xxxxxxxx
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--selected"
            href="#"
            aria-label="xxxx, current page"
            aria-current="page"
            >xxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-1"
            >
              Show more xxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-1"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx xxxx xxx xxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-2"
            >
              Show more xx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-2"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx xxxxxxxx x xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx xxxxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-3"
            >
              Show more xxxxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-3"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx x xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-4"
            >
              Show more xxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-4"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxx xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxx xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-5"
            >
              Show more xxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-5"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxx xxx xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxx x xxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-6"
            >
              Show more xxxx x xxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-6"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx xxxxxx xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx xxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx xxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxx x xxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-7"
            >
              Show more xxxx x xxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-7"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx x xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxx x xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx xx x xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxxxxx xxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-8"
            >
              Show more xxxxxxxx xxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-8"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx x xxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx x xxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxx x xxxxxxxxxxx</a
          >
        </li>
        <li
          class="o-header__drawer-menu-item o-header__drawer-menu-item--heading"
        >
          xx xxxxxxxxxx
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxxxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxx xxxx xxx xx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxx xxxxxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxx xxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxxxxxx</a
          >
        </li>
        <li
          class="o-header__drawer-menu-item o-header__drawer-menu-item--divide"
        >
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected"
            href="#"
            >xx xx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxx xxxxx</a
          >
        </li>
      </ul>
    </nav>

    <nav class="o-header__drawer-menu o-header__drawer-menu--user">
      <ul class="o-header__drawer-menu-list">
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link"
            href="/products?segID=400863&amp;segmentID=190b4443-dc03-bd53-e79b-b4b6fbd04e64"
            >Subscribe</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a class="o-header__drawer-menu-link" href="/login">Sign In</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

Subbranded header

For Subbrands of the FT, eg Alphaville or Life&Arts, a subheader can be added to mark out their subbrandness. Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

<header
  class="o-header o-header--simple"
  data-o-component="o-header"
  data-o-header--no-js
>
  <div class="o-header__row o-header__top">
    <div class="o-header__container">
      <div class="o-header__top-wrapper">
        <div class="o-header__top-column o-header__top-column--left">
          <a
            href="#o-header-search"
            class="o-header__top-link o-header__top-link--search"
            aria-controls="o-header-search"
            title="Open search bar"
          >
            <span class="o-header__top-link-label">Open search bar</span>
          </a>
        </div>

        <div class="o-header__top-column o-header__top-column--center">
          <a
            class="o-header__top-logo"
            href="/"
            title="Go to Financial Times homepage"
          >
            <span class="o-header__visually-hidden">Financial Times</span>
          </a>
        </div>

        <div class="o-header__top-column o-header__top-column--right">
          <a
            class="o-header__top-link o-header__top-link--myft"
            href="/myft"
            aria-label="My F T"
          >
            <span class="o-header__visually-hidden">myFT</span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <div
    id="o-header-search"
    class="o-header__row o-header__search o--if-js"
    role="search"
    data-o-header-search
  >
    <div class="o-header__container">
      <form
        class="o-header__search-form"
        action="/search"
        role="search"
        aria-label="Site search"
      >
        <label class="o-header__visually-hidden" for="o-header-search-term-js"
          >Search the <abbr title="Financial Times">FT</abbr></label
        >
        <input
          class="o-header__search-term"
          id="o-header-search-term-js"
          name="q"
          type="text"
          placeholder="Search the FT"
        />
        <button class="o-header__search-submit" type="submit">Search</button>
        <button
          class="o-header__search-close"
          type="button"
          aria-controls="o-header-search"
          title="Close search bar"
        >
          <span class="o-header__visually-hidden">Close search bar</span>
        </button>
      </form>
    </div>
  </div>

  <div
    class="o-header__drawer"
    id="o-header-drawer"
    role="navigation"
    aria-label="Drawer menu"
    data-o-header-drawer
    data-o-header-drawer--no-js
  >
    <div class="o-header__drawer-inner">
      <div class="o-header__drawer-tools">
        <a class="o-header__drawer-tools-logo" href="/">
          <span class="o-header__visually-hidden">Financial Times</span>
        </a>
        <button
          type="button"
          class="o-header__drawer-tools-close"
          aria-controls="o-header-drawer"
          title="Close drawer menu"
        >
          <span class="o-header__visually-hidden">Close drawer menu</span>
        </button>
        <p class="o-header__drawer-current-edition">UK Edition</p>
      </div>

      <div class="o-header__drawer-search">
        <form
          class="o-header__drawer-search-form"
          action="/search"
          role="search"
          aria-label="Site search"
        >
          <label
            class="o-header__visually-hidden"
            for="o-header-drawer-search-term"
            >Search the <abbr title="Financial Times">FT</abbr></label
          >
          <input
            class="o-header__drawer-search-term"
            id="o-header-drawer-search-term"
            name="q"
            type="text"
            autocomplete="off"
            autocorrect="off"
            autocapitalize="off"
            spellcheck="false"
            placeholder="Search the FT"
          />
          <button class="o-header__drawer-search-submit" type="submit">
            <span class="o-header__visually-hidden">Search</span>
          </button>
        </form>
      </div>

      <nav class="o-header__drawer-menu" aria-label="Edition switcher">
        <ul class="o-header__drawer-menu-list">
          <li class="o-header__drawer-menu-item"></li>
          <a class="o-header__drawer-menu-link" href="/?edition=international"
            >Switch to International Edition</a
          >
        </ul>
      </nav>

      <nav class="o-header__drawer-menu o-header__drawer-menu--primary">
        <ul class="o-header__drawer-menu-list">
          <li
            class="o-header__drawer-menu-item o-header__drawer-menu-item--heading"
          >
            xxx xxxxxxxx
          </li>
          <li class="o-header__drawer-menu-item">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--selected"
              href="#"
              aria-label="xxxx, current page"
              aria-current="page"
              >xxxx</a
            >
          </li>
          <li class="o-header__drawer-menu-item">
            <div class="o-header__drawer-menu-toggle-wrapper">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
              <button
                class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
                aria-controls="o-header-drawer-child-1"
              >
                Show more xxxxx links
              </button>
            </div>
            <ul
              class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
              id="o-header-drawer-child-1"
            >
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxx xxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxx xxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxx xxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxx xxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxx xxxx xxx xxxxxx</a
                >
              </li>
            </ul>
          </li>
          <li class="o-header__drawer-menu-item">
            <div class="o-header__drawer-menu-toggle-wrapper">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
                href="#"
                >xx</a
              >
              <button
                class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
                aria-controls="o-header-drawer-child-2"
              >
                Show more xx links
              </button>
            </div>
            <ul
              class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
              id="o-header-drawer-child-2"
            >
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xx xxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xx xxxxxxxx x xxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xx xxxxxxxxx</a
                >
              </li>
            </ul>
          </li>
          <li class="o-header__drawer-menu-item">
            <div class="o-header__drawer-menu-toggle-wrapper">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxx</a
              >
              <button
                class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
                aria-controls="o-header-drawer-child-3"
              >
                Show more xxxxxxxxx links
              </button>
            </div>
            <ul
              class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
              id="o-header-drawer-child-3"
            >
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxx x xxxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxxx</a
                >
              </li>
            </ul>
          </li>
          <li class="o-header__drawer-menu-item">
            <div class="o-header__drawer-menu-toggle-wrapper">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxx</a
              >
              <button
                class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
                aria-controls="o-header-drawer-child-4"
              >
                Show more xxxxxxx links
              </button>
            </div>
            <ul
              class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
              id="o-header-drawer-child-4"
            >
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxx xxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxx xxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxx xxxxxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxx</a
                >
              </li>
            </ul>
          </li>
          <li class="o-header__drawer-menu-item">
            <div class="o-header__drawer-menu-toggle-wrapper">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxx</a
              >
              <button
                class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
                aria-controls="o-header-drawer-child-5"
              >
                Show more xxxxxxx links
              </button>
            </div>
            <ul
              class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
              id="o-header-drawer-child-5"
            >
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xx xxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxx xxx xxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxx</a
                >
              </li>
            </ul>
          </li>
          <li class="o-header__drawer-menu-item">
            <div class="o-header__drawer-menu-toggle-wrapper">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
                href="#"
                >xxxx x xxxxxxx</a
              >
              <button
                class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
                aria-controls="o-header-drawer-child-6"
              >
                Show more xxxx x xxxxxxx links
              </button>
            </div>
            <ul
              class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
              id="o-header-drawer-child-6"
            >
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxx xxxxxx xxxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxx xxxxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxxxxxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxx xxxxx</a
                >
              </li>
            </ul>
          </li>
          <li class="o-header__drawer-menu-item">
            <div class="o-header__drawer-menu-toggle-wrapper">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
                href="#"
                >xxxx x xxxx</a
              >
              <button
                class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
                aria-controls="o-header-drawer-child-7"
              >
                Show more xxxx x xxxx links
              </button>
            </div>
            <ul
              class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
              id="o-header-drawer-child-7"
            >
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxx x xxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxx x xxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxx xx x xxxxx</a
                >
              </li>
              <li class="o-header__drawer-menu-item">
                <a
                  class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                  href="#"
                  >xxxxxxxx</a
                >
              </li>
            </ul>
          </li>
          <li class="o-header__drawer-menu-item">
            <div class="o-header__drawer-menu-toggle-wrapper">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx xxxxxxx</a
              >
              <button
                class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
                aria-controls="o-header-drawer-child-8"
              >
                Show more xxxxxxxx xxxxxxx links