Origami Frontend Components & Services

Readme: o-header

Responsive header for FT branded sites. See the Origami Navigation Service to populate o-header markup with real navigation data.


Check out how to include Origami components in your project to get started with o-header.


As there are variations on the header, and the markup for each is specific and somewhat extensive, we recommend visiting the component page in the registry to find the markup that is most suited to your product. The demo on the component page does not use real navigation data as it may become out of date. See the Origami Navigation Service to populate o-header markup with real navigation data. The Origami Navigation Service is a JSON API which provides navigation structures for use across FT websites.

There are intentionally no classes to switch between logged in and out as we don't want to do that in the client side. This is left up to the product.

Some elements inside the header require specific data attributes so the JavaScript can add some behaviour correctly. These are:


An o-header object must be constructed for every <header> you have on your page that uses this component.

import Header from '@financial-times/o-header';
const headerEl = document.querySelector('.o-header');
const header = new oHeader(headerEl);

Alternatively, a o.DOMContentLoaded event can be dispatched on the document to auto-construct an o-header object for each element with a data-o-component="o-header" attribute:

import '@financial-times/o-header';
document.addEventListener("DOMContentLoaded", function() {
    document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));


o-header fires the following events:


The header is made up of various features (e.g. nav, search, and drawer). To get everything, use the oHeader() mixin without arguments. To get only the stuff you need, you can pass in a list of options as the first argument.

The list of options is as follows:

To output styles for a feature only, excluding base header styles required by all features, pass false as the second argument.

E.g. To get all of the CSS needed for the FT homepage you would call:

@include oHeader(('sticky', 'simple', 'anon', 'search', 'nav', 'megamenu'));

Browser Support

To use o-header setup a core and enhanced experience within your project. o-header depends on the o--if-js and o--if-no-js classes.

Migration guide

State Major Version Last Minor Release Migration guide
✨ active 11 N/A migrate to v11
⚠ maintained 10 N/A migrate to v10
╳ deprecated 9 N/A migrate to v9
╳ deprecated 8 8.6 migrate to v8
╳ deprecated 7 7.8 migrate to v7
╳ deprecated 6 6.14 migrate to v6
╳ deprecated 5 5.0 -
╳ deprecated 4 4.0 -
╳ deprecated 3 3.0 -
╳ deprecated 2 2.5 -
╳ deprecated 1 1.1 -


If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email Origami Support.


This software is published by the Financial Times under the MIT licence.

Switch component view

GitHub: o-header@11.0.6

Install o-header

If using the Build Service, add o-header@^11.0.6 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-header@^11.0.6".

Help & Support

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

Slack: #origami-support
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: #origami-support
Email: origami.support@ft.com