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:
<div> of the mega menu<div> of the enhanced search row. There are two search rows, one for enhanced, another for core<div> of the drawerdiv of the subnav menudiv of the subnav menu so the JS can handle the scrollingAn 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:
oHeader.MegaMenuShow: When a mega menu is shown. The target of the event is the menu itself.oHeader.MegaMenuClose: When a mega menu is closed. The target of the event is the menu itself.oHeader.Sticky: When the header changes to or from sticky. The event detail will contain an isActive boolean indicated sticky or not. The target of the event is the menu itself.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:
top: Styles for first header row including the logo and buttons for the drawer menu and search bar.nav: The primary nav, this is the nav that sits directly under the top section of the header.search: The search bar that appears when a user presses the search icon.anon: Styles for the row that appears when a user is not logged in.sticky: Styles that make the header stick to the top of the page when scrolling down.simple: Styles for the reduced slimmer header for article pages.transparent: Styles for an "inverse" header with no background colour and white text and logos. For use on dark backgrounds only. Does not support the navigation drawer currently (speak to Origami if you would like to use a drawer with this variant).megamenu: Styles for the mega-menu that appears when users hover over a nav item.drawer: Styles for the drawer menu which is used as the primary navigation on small screens.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'));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.
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.