Origami Frontend Components & Services

Demos: o-header

Header

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

<header class="o-header" data-o-component="o-header" data-o-header--no-js>

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

	<div class="o-header__row o-header__top">
		<div class="o-header__container">
			<div class="o-header__top-wrapper">
				<div class="o-header__top-column o-header__top-column--left">
					<a href="#o-header-drawer" class="o-header__top-link o-header__top-link--menu" aria-controls="o-header-drawer" title="Open side navigation menu">
						<span class="o-header__top-link-label">Open side navigation menu</span>
					</a>
					<a href="#o-header-search" class="o-header__top-link o-header__top-link--search" aria-controls="o-header-search-js" 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>

	<!-- 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="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="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>
		</div>

		<nav class="o-header__drawer-editions" aria-label="Edition switcher">
			<a class="o-header__drawer-editions-link" href="/uk?edition=uk" aria-label="Current edition" aria-current="page">xx Edition</a>
			<a class="o-header__drawer-editions-link" href="/international?edition=international">xxxxxxxxxxxxx Edition</a>
		</nav>

		<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 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-- o-header__drawer-menu-link--selected" href="#" aria-label="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-- 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-- 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-- 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-- 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-- 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-- 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-- 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-- o-header__drawer-menu-link--unselected" href="#">xxxxxxxxxxx</a>
						</li>
						<li class="o-header__drawer-menu-item o-header__drawer-menu-item--divide">
								<a class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected" href="#">xx xx</a>
						</li>
						<li class="o-header__drawer-menu-item ">
								<a class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected" href="#">xxxxxxxxx</a>
						</li>
						<li class="o-header__drawer-menu-item ">
								<a class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected" href="#">xxxxxxx xxxxx</a>
						</li>
			</ul>
		</nav>

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

	</div>
</div>

Mega menu

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

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

Header with subnav

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

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

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

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

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

Simple header

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

<header class="o-header o-header--simple" data-o-component="o-header" data-o-header--no-js>
	<div class="o-header__row o-header__top">
		<div class="o-header__container">
			<div class="o-header__top-wrapper">

				<div class="o-header__top-column o-header__top-column--left">
					<a href="#o-header-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>
					<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>
		</div>

		<nav class="o-header__drawer-editions" aria-label="Edition switcher">
			<a class="o-header__drawer-editions-link" href="/uk?edition=uk" aria-label="Current edition" aria-current="page">xx Edition</a>
			<a class="o-header__drawer-editions-link" href="/international?edition=international">xxxxxxxxxxxxx Edition</a>
		</nav>

		<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 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-- o-header__drawer-menu-link--selected" href="#" aria-label="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-- 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-- 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-- 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-- 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-- 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-- 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-- 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-- o-header__drawer-menu-link--unselected" href="#">xxxxxxxxxxx</a>
						</li>
						<li class="o-header__drawer-menu-item o-header__drawer-menu-item--divide">
								<a class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected" href="#">xx xx</a>
						</li>
						<li class="o-header__drawer-menu-item ">
								<a class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected" href="#">xxxxxxxxx</a>
						</li>
						<li class="o-header__drawer-menu-item ">
								<a class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected" href="#">xxxxxxx xxxxx</a>
						</li>
			</ul>
		</nav>

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

	</div>
</div>

Transparent 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--transparent" 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-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>
					<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>

	<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="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>
		</div>

		<nav class="o-header__drawer-editions" aria-label="Edition switcher">
			<a class="o-header__drawer-editions-link" href="/uk?edition=uk" aria-label="Current edition" aria-current="page">xx Edition</a>
			<a class="o-header__drawer-editions-link" href="/international?edition=international">xxxxxxxxxxxxx Edition</a>
		</nav>

		<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 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-- o-header__drawer-menu-link--selected" href="#" aria-label="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-- 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-- 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-- 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-- 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-- 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-- 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-- 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-- o-header__drawer-menu-link--unselected" href="#">xxxxxxxxxxx</a>
						</li>
						<li class="o-header__drawer-menu-item o-header__drawer-menu-item--divide">
								<a class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected" href="#">xx xx</a>
						</li>
						<li class="o-header__drawer-menu-item ">
								<a class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected" href="#">xxxxxxxxx</a>
						</li>
						<li class="o-header__drawer-menu-item ">
								<a class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected" href="#">xxxxxxx xxxxx</a>
						</li>
			</ul>
		</nav>

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

	</div>
</div>

Sticky header

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

<header class="o-header o-header--simple o-header--sticky o--if-js" aria-hidden="true" role="presentation" data-o-component="o-header" data-o-header--sticky>
	<div class="o-header__row o-header__top">
		<div class="o-header__container">
			<div class="o-header__top-wrapper">

				<div class="o-header__top-column o-header__top-column--left">
					<a href="#o-header-drawer" class="o-header__top-link o-header__top-link--menu" aria-controls="o-header-drawer" tabindex="-1">
						<span class="o-header__top-link-label">Open side navigation menu</span>
					</a>
					<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="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>
		</div>

		<nav class="o-header__drawer-editions" aria-label="Edition switcher">
			<a class="o-header__drawer-editions-link" href="/uk?edition=uk" aria-label="Current edition" aria-current="page">xx Edition</a>
			<a class="o-header__drawer-editions-link" href="/international?edition=international">xxxxxxxxxxxxx Edition</a>
		</nav>

		<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 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-- o-header__drawer-menu-link--selected" href="#" aria-label="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-- 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-- 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-- 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-- 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-- 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-- 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-- 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-- o-header__drawer-menu-link--unselected" href="#">xxxxxxxxxxx</a>
						</li>
						<li class="o-header__drawer-menu-item o-header__drawer-menu-item--divide">
								<a class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected" href="#">xx xx</a>
						</li>
						<li class="o-header__drawer-menu-item ">
								<a class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected" href="#">xxxxxxxxx</a>
						</li>
						<li class="o-header__drawer-menu-item ">
								<a class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected" href="#">xxxxxxx xxxxx</a>
						</li>
			</ul>
		</nav>

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

	</div>
</div>

Subbranded header

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

<header class="o-header o-header--simple" data-o-component="o-header" data-o-header--no-js>
	<div class="o-header__row o-header__top">
		<div class="o-header__container">
			<div class="o-header__top-wrapper">

				<div class="o-header__top-column o-header__top-column--left">
					<a href="#o-header-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>
					<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>
		</div>

		<nav class="o-header__drawer-editions" aria-label="Edition switcher">
			<a class="o-header__drawer-editions-link" href="/uk?edition=uk" aria-label="Current edition" aria-current="page">xx Edition</a>
			<a class="o-header__drawer-editions-link" href="/international?edition=international">xxxxxxxxxxxxx Edition</a>
		</nav>

		<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 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-- o-header__drawer-menu-link--selected" href="#" aria-label="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"