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&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>
Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.
Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.
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.
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&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>
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 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&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>
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
</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&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>
<div class="o-header__subbrand" data-o-header-subbrand>
<a class="o-header__subbrand-logo demo-o-header__subbrand-logo" href="/" title="Go to the Life&Arts page">
<span class="o-header__visually-hidden">Life&Arts</span>
</a>
</div>
<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 aria-current="page" aria-label="xxxx x xxxx, current page">
xxxx x xxxx
</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="#">
xxxxx x xxxx
</a>
</li>
<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="#">
xxxx x xxxxx
</a>
</li>
<li class="o-header__subnav-item">
<a class="o-header__subnav-link" href="#">
xxxxxx
</a>
</li>
<li class="o-header__subnav-item">
<a class