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.

Markup

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:

JavaScript

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

import Header from '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 'o-header';
document.addEventListener("DOMContentLoaded", function() {
    document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));
});

Events

o-header fires the following events:

Sass

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

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

Migration

State Major Version Last Minor Release Migration guide
✨ active 8 N/A migrate to v8
⚠ maintained 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 -

Contact

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.


Licence

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

Support Status
active
Switch component view

GitHub Repository

Install o-header

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

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

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