Origami Frontend Components & Services

Readme: o-header

Responsive header for FT branded sites


Quick Start

Install the module:

bower install --S o-header

Load the JS:

const oHeader = require('o-header');


Load the CSS:

$o-header-is-silent: false;
@import 'o-header/main';

Load o-fonts and set some default CSS properties to the document root:

html {
    font-family: "MetricWeb";

Copy the markup from one of the demos in the registry, and paste it in a document


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.

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 module.

const Header = require('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:

document.addEventListener("DOMContentLoaded", function() {
    document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));


The 'base' of the image url can be set with the $o-header-image-base-url variable. e.g. setting

$o-header-image-base-url: 'https://my.image.service/foo';

will output an image logo url in the format https://my.image.service/foo/v2/images/raw/ftlogo:....

The 'version' of the image url can be set with the $o-header-image-service-version variable. e.g. setting

$o-header-image-service-version: "v1";

will output an image logo url in the format https://my.image.service/foo/v1/images/raw/ftlogo:....

Silent mode (docs)

When using o-header in silent mode, we offer a series of helper mixins to output styles for different parts of the header.


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 features as the first argument.

The list of features is as follows:

To output styles for a feature only, excluding the core header styles, pass false as the second argument.


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

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


o-header fires the following events:

Browser Support

We use the standard o--if-js and o--if-no-js classes to hide elements in enhanced and core experience respectively

Migration Guide

Migrating from 6.x.x to 7.x.x

V7 introduces new major versions of o-colors, o-typography, o-buttons and o-visual-effects. Updating to this new version will mean updating any other components that you have which are using o-colors, o-typography, o-buttons, or o-visual-effects. There are no other breaking changes in this release.

Migrating from 5.x.x to 6.x.x

This is a complete change in the markup and usage of the module, so we advise to look at the markup in the demos and go over the readme. If any issues come up, please let us know.





Support Status
Switch component view

GitHub Repository

Install o-header

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

If running a Manual Build, run bower install --save "o-header@^7.5.9".

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

Feedback / Issues


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