Demos: o-header

Select Full Code Snippet

<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 drawer menu">
						<span class="o-header__top-link-label">Open drawer 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">Home</a>
			</li>
			<li class="o-header__nav-item">
				<a class="o-header__nav-link o-header__nav-link--primary" href>FastFT</a>
			</li>
			<li class="o-header__nav-item">
				<a class="o-header__nav-link o-header__nav-link--primary" href>Markets Data</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-">Home</a>
				</li>
				<li class="o-header__nav-item">
					<a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">World</a>
				</li>
				<li class="o-header__nav-item">
					<a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">UK</a>
				</li>
				<li class="o-header__nav-item">
					<a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">Companies</a>
				</li>
				<li class="o-header__nav-item">
					<a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">Tech</a>
				</li>
				<li class="o-header__nav-item">
					<a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">Markets</a>
				</li>
				<li class="o-header__nav-item">
					<a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">Opinion</a>
				</li>
				<li class="o-header__nav-item">
					<a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">Work &amp; Careers</a>
				</li>
				<li class="o-header__nav-item">
					<a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">Life &amp; Arts</a>
				</li>
				<li class="o-header__nav-item">
					<a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">Graphics</a>
				</li>
				<li class="o-header__nav-item">
					<a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">How to spend it</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">UK Edition</a>
			<a class="o-header__drawer-editions-link" href="/international?edition=international">International 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">Top sections</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">Home</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="#">World</a>
									<button class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected" aria-controls="o-header-drawer-child-1">
										Show more World 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="#">World Economy</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">UK</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">US</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">China</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Africa</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Asia Pacific</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Emerging Markets</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Europe</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Latin America</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Middle East and Africa</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="#">UK</a>
									<button class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected" aria-controls="o-header-drawer-child-2">
										Show more UK 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="#">UK Economy</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">UK Politics &amp; Policy</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">UK Companies</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="#">Companies</a>
									<button class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected" aria-controls="o-header-drawer-child-3">
										Show more Companies 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="#">Energy</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Financials</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Health</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Industrials</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Media</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Retail &amp; Consumer</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Technology</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Telecoms</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Transport</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="#">Markets</a>
									<button class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected" aria-controls="o-header-drawer-child-4">
										Show more Markets 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="#">Alphaville</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Markets Data</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Capital Markets</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Commodities</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Currencies</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Equities</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Fund Management</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Trading</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="#">Opinion</a>
									<button class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected" aria-controls="o-header-drawer-child-5">
										Show more Opinion 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="#">Columnists</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">FT View</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">The Big Read</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Lex</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Alphaville</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Obituaries</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Letters</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="#">Work &amp; Careers</a>
									<button class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected" aria-controls="o-header-drawer-child-6">
										Show more Work &amp; Careers 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="#">Business School Rankings</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Business Education</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Entrepreneurship</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Recruitment</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Business Books</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="#">Life &amp; Arts</a>
									<button class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected" aria-controls="o-header-drawer-child-7">
										Show more Life &amp; Arts 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="#">House &amp; Home</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Books</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Food &amp; Drink</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Travel</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Style</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Arts</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Sports</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Music</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Film, TV &amp; Radio</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Magazine</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="#">Personal Finance</a>
									<button class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected" aria-controls="o-header-drawer-child-8">
										Show more Personal Finance 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="#">Property &amp; Mortgages</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Investments</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Pensions</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Tax</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#">Bankings &amp; Savings</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="#">Science &amp; Environment</a>
						</li>
						<li class="o-header__drawer-menu-item o-header__drawer-menu-item--heading">FT recommends</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="#">Lex</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="#">Alphaville</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="#">Lunch with the FT</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="#">Video</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="#">Special Reports</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="#">News feed</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="#">Newsletters</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="#">My FT</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="#">Portfolio</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="#">Today&apos;s Paper</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>

Select Full Code Snippet

<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">Home</a>
			</li>
			<li class="o-header__nav-item">
				<a class="o-header__nav-link o-header__nav-link--primary" href>FastFT</a>
			</li>
			<li class="o-header__nav-item">
				<a class="o-header__nav-link o-header__nav-link--primary" href>Markets Data</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">Home</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">World</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>
													All World
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													World Economy
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													US
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Europe
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Latin America
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Asia Pacific
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Africa
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Middle East and Africa
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Emerging Markets
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Science &amp; Environment
												</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">UK</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>
													All UK
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													UK Politics &amp; Policy
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													UK Economy
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													England
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Scotland
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Wales
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													N. Ireland
												</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">Companies</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>
													All Companies
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Technology
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Financials
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Energy
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Retail &amp; Consumer
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Industrials
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Telecoms
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Health
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Media
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Transport
												</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">Markets</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>
													All Markets
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Markets Data
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Commodities
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Currencies
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Equities
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Capital Markets
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Trading
												</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">Opinion</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>
													All Opinion
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													FT View
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													The Big Read
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Lex
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Columnists
												</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">Work &amp; Careers</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>
													All Work &amp; Career
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Business Education
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Management
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Entrepreneurship
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Recruitment
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Business Books
												</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">Life &amp; Arts</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>
													All Life &amp; Arts
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Magazine
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													House &amp; Home
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Books
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Food &amp; Drink
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Travel
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Style
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Arts
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Sports
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Music
												</a>
											</li>
											<li class="o-header__mega-item">
												<a class="o-header__mega-link" href>
													Film, TV &amp; Radio
												</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>