Open primary navigation
Origami Frontend Components & Services

Demos: o-header-services

Header with title section

If your site has no navigation you can use this top bar on its own.

Open demo in a new tab 
<header class="o-header-services " data-o-component="o-header-services">
	<div class="o-header-services__top">
		<!-- Link to a fallback nav for the core experience when using a drawer and hamburger icon. -->
		<div class="o-header-services__logo"></div>
		<div class="o-header-services__title">
			<a class="o-header-services__product-name" href="/">Tool or Service name</a>
			<span class="o-header-services__product-tagline">Tagline to explain the product here</span>
		</div>
		<ul class="o-header-services__related-content">
			<li>
				<a href>XXXX</a>
			</li>
			<li>
				<a href>Sign in</a>
			</li>
		</ul>
	</div>


</header>

<div class="dummy-text">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie eget ex ut volutpat. Suspendisse et molestie mi. Suspendisse at magna posuere, euismod erat eget, aliquet lorem. Praesent at semper nulla. Fusce a lobortis nibh, sit amet lobortis elit. Nunc ornare vulputate dictum. Mauris at luctus est. Cras fermentum, ex in rhoncus semper, nunc nunc porttitor felis, a dictum neque orci a tellus. Morbi ipsum mauris, pellentesque sit amet velit vitae, posuere euismod nisi. Etiam velit orci, sagittis vel pharetra sed, molestie vel massa. Sed dui sapien, euismod eget ultrices et, lacinia ut mi. Vivamus <a href="#">porttitor bibendum mauris</a> vel tempor. Vivamus vehicula dictum ipsum, a porta ex fermentum in.
	</p>
	<p>
		Pellentesque accumsan consectetur arcu, rutrum cursus arcu pretium vitae. Nullam vitae massa felis. Donec convallis iaculis faucibus. Etiam non ullamcorper dui. Nullam sit amet ultricies erat, at luctus metus. Aliquam euismod sem ut vehicula sollicitudin. Sed vitae neque ligula. Pellentesque id diam quis libero hendrerit semper nec vitae lectus. Aenean quis accumsan nisl.
	</p>
</div>

Header with primary navigation

Navigation for an overview of a product's pages. These nav items collapse into a drawer at narrow screen widths.

Open demo in a new tab 
<header class="o-header-services " data-o-component="o-header-services">
	<div class="o-header-services__top">
		<!-- Link to a fallback nav for the core experience when using a drawer and hamburger icon. -->
		<div class="o-header-services__hamburger">
			<a class="o-header-services__hamburger-icon" href="#core-nav-fallback" role="button">
				<span class="o-header-services__visually-hidden">Open primary navigation</span>
			</a>
		</div>
		<div class="o-header-services__logo"></div>
		<div class="o-header-services__title">
			<a class="o-header-services__product-name" href="/">Tool or Service name</a>
			<span class="o-header-services__product-tagline">Tagline to explain the product here</span>
		</div>
		<ul class="o-header-services__related-content">
			<li>
				<a href>XXXX</a>
			</li>
			<li>
				<a href>Sign in</a>
			</li>
		</ul>
	</div>

	<nav class="o-header-services__primary-nav" aria-label="primary">
		<ul class="o-header-services__primary-nav-list">
			<li>
				<a aria-current="true" href>Docs</a>
			</li>
			<li>
				<a href>Specs</a>
			</li>
			<li>
				<a href="#">Registry</a>
			</li>
		</ul>
	</nav>

</header>

<div class="dummy-text">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie eget ex ut volutpat. Suspendisse et molestie mi. Suspendisse at magna posuere, euismod erat eget, aliquet lorem. Praesent at semper nulla. Fusce a lobortis nibh, sit amet lobortis elit. Nunc ornare vulputate dictum. Mauris at luctus est. Cras fermentum, ex in rhoncus semper, nunc nunc porttitor felis, a dictum neque orci a tellus. Morbi ipsum mauris, pellentesque sit amet velit vitae, posuere euismod nisi. Etiam velit orci, sagittis vel pharetra sed, molestie vel massa. Sed dui sapien, euismod eget ultrices et, lacinia ut mi. Vivamus <a href="#">porttitor bibendum mauris</a> vel tempor. Vivamus vehicula dictum ipsum, a porta ex fermentum in.
	</p>
	<p>
		Pellentesque accumsan consectetur arcu, rutrum cursus arcu pretium vitae. Nullam vitae massa felis. Donec convallis iaculis faucibus. Etiam non ullamcorper dui. Nullam sit amet ultricies erat, at luctus metus. Aliquam euismod sem ut vehicula sollicitudin. Sed vitae neque ligula. Pellentesque id diam quis libero hendrerit semper nec vitae lectus. Aenean quis accumsan nisl.
	</p>
</div>

Header with primary navigation and drop down menus

Navigation for an overview of a product's pages. These nav items collapse into a drawer at narrow screen widths, and can be presented as dropdown menus

Open demo in a new tab 
<header class="o-header-services " data-o-component="o-header-services">
	<div class="o-header-services__top">
		<!-- Link to a fallback nav for the core experience when using a drawer and hamburger icon. -->
		<div class="o-header-services__hamburger">
			<a class="o-header-services__hamburger-icon" href="#core-nav-fallback" role="button">
				<span class="o-header-services__visually-hidden">Open primary navigation</span>
			</a>
		</div>
		<div class="o-header-services__logo"></div>
		<div class="o-header-services__title">
			<a class="o-header-services__product-name" href="/">Tool or Service name</a>
			<span class="o-header-services__product-tagline">Tagline to explain the product here</span>
		</div>
		<ul class="o-header-services__related-content">
			<li>
				<a href>XXXX</a>
			</li>
			<li>
				<a href>Sign in</a>
			</li>
		</ul>
	</div>

	<nav class="o-header-services__primary-nav" aria-label="primary">
		<ul class="o-header-services__primary-nav-list">
			<li data-o-header-services-level="1">
				<a href>Docs</a><!--
				--><button class="o-header-services__drop-down-button" type="button" name="button" aria-label="Toggle dropdown menu"></button>
				<ul data-o-header-services-level="2" aria-hidden="true">
					<li>
						<a href>Principles</a>
					</li>
					<li>
						<a href>Components</a>
					</li>
					<li>
						<a href>Services</a>
					</li>
					<li>
						<a aria-current="true" href>Tutorials</a>
					</li>
					<button class="o-header-services__visually-hidden" type="button" name="button">Close dropdown menu</button>
				</ul>
			</li>
			<li data-o-header-services-level="1">
				<a href>Specs</a><!--
				--><button class="o-header-services__drop-down-button" type="button" name="button" aria-label="Toggle dropdown menu"></button>
				<ul data-o-header-services-level="2" aria-hidden="true">
					<li>
						<a href>Condensed Spec</a>
					</li>
					<li>
						<a href>Formal Spec</a>
					</li>
					<li>
						<a href>Components</a>
					</li>
					<li>
						<a href>Services</a>
					</li>
					<li>
						<a href>Manifest</a>
					</li>
					<button class="o-header-services__visually-hidden" type="button" name="button">Close dropdown menu</button>
				</ul>
			</li>
			<li>
				<a href="#">Registry</a>
			</li>
		</ul>
	</nav>

	<nav class="o-header-services__secondary-nav" aria-label="secondary" data-o-header-services-nav>
		<div class="o-header-services__secondary-nav-content" data-o-header-services-nav-list>
			<ol class="o-header-services__secondary-nav-list o-header-services__secondary-nav-list--ancestors" aria-label="Ancestor sections">
				<li>
					<a href>Documentation</a>
				</li>
				<li>
					<a href>Tutorials</a>
				</li>
			</ol>

			<ul class="o-header-services__secondary-nav-list o-header-services__secondary-nav-list--children" aria-label="Child sections">
				<li>
					<a href>Build Service</a>
				</li>
				<li>
					<a aria-current="true" href>The manual build process</a>
				</li>
			</ul>
		</div>
		<button class="o-header-services__scroll-button o-header-services__scroll-button--left" title="scroll left" aria-hidden="true" disabled></button>
		<button class="o-header-services__scroll-button o-header-services__scroll-button--right" title="scroll right" aria-hidden="true" disabled></button>
	</nav>
</header>

<div class="dummy-text">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie eget ex ut volutpat. Suspendisse et molestie mi. Suspendisse at magna posuere, euismod erat eget, aliquet lorem. Praesent at semper nulla. Fusce a lobortis nibh, sit amet lobortis elit. Nunc ornare vulputate dictum. Mauris at luctus est. Cras fermentum, ex in rhoncus semper, nunc nunc porttitor felis, a dictum neque orci a tellus. Morbi ipsum mauris, pellentesque sit amet velit vitae, posuere euismod nisi. Etiam velit orci, sagittis vel pharetra sed, molestie vel massa. Sed dui sapien, euismod eget ultrices et, lacinia ut mi. Vivamus <a href="#">porttitor bibendum mauris</a> vel tempor. Vivamus vehicula dictum ipsum, a porta ex fermentum in.
	</p>
	<p>
		Pellentesque accumsan consectetur arcu, rutrum cursus arcu pretium vitae. Nullam vitae massa felis. Donec convallis iaculis faucibus. Etiam non ullamcorper dui. Nullam sit amet ultricies erat, at luctus metus. Aliquam euismod sem ut vehicula sollicitudin. Sed vitae neque ligula. Pellentesque id diam quis libero hendrerit semper nec vitae lectus. Aenean quis accumsan nisl.
	</p>
</div>

Header with a primary and a secondary navigation

For sites with more than a few sections, a secondary navigation is also available

Open demo in a new tab 
<header class="o-header-services " data-o-component="o-header-services">
	<div class="o-header-services__top">
		<!-- Link to a fallback nav for the core experience when using a drawer and hamburger icon. -->
		<div class="o-header-services__hamburger">
			<a class="o-header-services__hamburger-icon" href="#core-nav-fallback" role="button">
				<span class="o-header-services__visually-hidden">Open primary navigation</span>
			</a>
		</div>
		<div class="o-header-services__logo"></div>
		<div class="o-header-services__title">
			<a class="o-header-services__product-name" href="/">Tool or Service name</a>
			<span class="o-header-services__product-tagline">Tagline to explain the product here</span>
		</div>
		<ul class="o-header-services__related-content">
			<li>
				<a href>XXXX</a>
			</li>
			<li>
				<a href>Sign in</a>
			</li>
		</ul>
	</div>

	<nav class="o-header-services__primary-nav" aria-label="primary">
		<ul class="o-header-services__primary-nav-list">
			<li>
				<a aria-current="true" href>Docs</a>
			</li>
			<li>
				<a href>Specs</a>
			</li>
			<li>
				<a href="#">Registry</a>
			</li>
		</ul>
	</nav>

	<nav class="o-header-services__secondary-nav" aria-label="secondary" data-o-header-services-nav>
		<div class="o-header-services__secondary-nav-content" data-o-header-services-nav-list>
			<ol class="o-header-services__secondary-nav-list o-header-services__secondary-nav-list--ancestors" aria-label="Ancestor sections">
				<li>
					<a href>Documentation</a>
				</li>
				<li>
					<a href>Tutorials</a>
				</li>
			</ol>

			<ul class="o-header-services__secondary-nav-list o-header-services__secondary-nav-list--children" aria-label="Child sections">
				<li>
					<a href>Build Service</a>
				</li>
				<li>
					<a aria-current="true" href>The manual build process</a>
				</li>
			</ul>
		</div>
		<button class="o-header-services__scroll-button o-header-services__scroll-button--left" title="scroll left" aria-hidden="true" disabled></button>
		<button class="o-header-services__scroll-button o-header-services__scroll-button--right" title="scroll right" aria-hidden="true" disabled></button>
	</nav>
</header>

<div class="dummy-text">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie eget ex ut volutpat. Suspendisse et molestie mi. Suspendisse at magna posuere, euismod erat eget, aliquet lorem. Praesent at semper nulla. Fusce a lobortis nibh, sit amet lobortis elit. Nunc ornare vulputate dictum. Mauris at luctus est. Cras fermentum, ex in rhoncus semper, nunc nunc porttitor felis, a dictum neque orci a tellus. Morbi ipsum mauris, pellentesque sit amet velit vitae, posuere euismod nisi. Etiam velit orci, sagittis vel pharetra sed, molestie vel massa. Sed dui sapien, euismod eget ultrices et, lacinia ut mi. Vivamus <a href="#">porttitor bibendum mauris</a> vel tempor. Vivamus vehicula dictum ipsum, a porta ex fermentum in.
	</p>
	<p>
		Pellentesque accumsan consectetur arcu, rutrum cursus arcu pretium vitae. Nullam vitae massa felis. Donec convallis iaculis faucibus. Etiam non ullamcorper dui. Nullam sit amet ultricies erat, at luctus metus. Aliquam euismod sem ut vehicula sollicitudin. Sed vitae neque ligula. Pellentesque id diam quis libero hendrerit semper nec vitae lectus. Aenean quis accumsan nisl.
	</p>
</div>
Status
active Origami v1
Switch component view

GitHub Repository

Install o-header-services

If using the Build Service, add o-header-services@^3.3.4 to your script and link tags. Ensure the correct brand is set with a query parameter &brand=internal.

If running a Manual Build, run npm install "o-header-services@^3.3.4".

Help & Support

o-header-services is maintained directly by the Origami team. If you have any questions about o-header-services or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com