Origami Frontend Components & Services

Readme: o-header-services

This header is for tools and services built by the Financial Times.

Markup

An o-header-services header is divided into three main parts: title section (required), primary navigation (optional), and secondary navigation (optional). Each section is placed within a header element:

<header class='o-header-services' data-o-component='o-header-services'>
    <!-- Markup specific to the needs of your product. Options detailed below. -->
</header>

Title Section

A title section is required for every header, and every title section must include a logo and a product title.
The logo will default to the FT logo—if you are not using the build service you can customise it with the oHeaderServices() Sass mixin.

You can choose to include a product tagline to describe your product concisely, and there is space for extra content such as a 'Sign In' link in this section of the header, too.

Note: If there is a 'Sign in' option, it should be consistent with other FT products by aligning itself to the right and avoiding different wording such as 'Log in' or 'Login'.

For an example and markup, see the title-only header in the Origami Registry.

Primary Navigation

The primary navigation is an optional addition to the title section. It's most useful for high-level navigation.

This section of the header has specific behaviour, as it turns into a drawer at smaller viewport sizes (740px down). It requires the addition an extra element in the title section to support the hamburger button.

If you are using extra content (such as a 'Sign in' link), that will be pulled into the drawer, as well.

For an example and markup, see the primary navigation in the Origami Registry.

Core Experience Of The Drawer

Small screen users should still be able to access the contents of the drawer even if their browser doesn't cut the mustard or the JavaScript has failed to load. In this case we recommend you have the contents of the drawer at the bottom of the page in a footer that is only visible if the body has a .core class. In core experience the hamburger menu links to an anchor at the bottom of the page.

Primary Navigation With Drop Down

The primary navigation can also handle dropdown menus. These menus are hidden behind a button that lives beside the navigation item that it is pertinent to.

Drop down menus also get pulled into the drawer on smaller viewports.

For an example and markup, see the primary navigation with drop downs in the Origami Registry.

Secondary Navigation

The secondary navigation is also an optional addition to the header, but it makes more sense alongside the primary navigation, as it serves more complicated products.

It includes two sections of navigation: 'ancestors' and 'children'.
The 'ancestor' section works in the form of a breadcrumb, and the children are relative to the ancestor.

At smaller viewports, it does not collapse into the drawer, but becomes scrollable instead.

For an example and markup, see the secondary navigation in the Origami Registry.

Themes

o-header-services offers theming for B2B or B2C products for FT.com products who use the master brand. They are designed to affect the title section and the primary navigation.

To add a theme to the header, add the appropriate class to the header element. For example, for B2B that would be:

+<header class='o-header-services o-header-services--b2b' data-o-component='o-header'>
-<header class='o-header-services' data-o-component='o-header'>
    <!-- Your header markup -->
</header>

For an example and markup, see the B2B and B2C headers in the Origami Registry.

Bleed Header

If your application requires a bleed header, you'll need to add the o-header-services--bleed variant to your header.

+<header class='o-header-services o-header-services--bleed' data-o-component='o-header'>
-<header class='o-header-services' data-o-component='o-header'>
    <!-- Your header markup -->
</header>

Sass

In order to output every type of o-header-services style, you'll need to include the following:

    @import 'o-header-services/main';

    @include oHeaderServices();

You can be more selective about which types you would like to output, by using an $opts map. It accepts the following options:

types

logo

drawer-breakpoint

To use a logo that is not the FT logo, the logo can be modified in one of two ways:

In this example we include only the styles for a primary navigation with the bleed modifier. We opt to use the Origami logo from the logo image set.

    @import 'o-header-services/main';

    @include oHeaderServices($opts: (
        'types': ('primary-nav', 'bleed');
        'logo': 'origami'
    ));

    // Will output styles for a bleed header with a primary navigation and the Origami logo

Customisation

o-header-services provides the option to customise the whitelabel brand. If you are using this brand, you can modify brand-specific variables by overriding them in a map in oHeaderServicesCustomize.

$o-brand: whitelabel;
@import 'o-header-services/main';

@include oHeaderServicesCustomize((
    'nav-hover-background': hotpink // will apply to background colors on hover, where appropriate
))

@include oHeaderServices($opts: (
    'types': ('primary-nav'),
    'features': ('drop-dowm')
));

We recommend customising the following brand variables:

In addition, the following brand variables may also be customised:

JavaScript

No code will run automatically unless you are using the Build Service. You must either construct an o-header-services object or fire an o.DOMContentLoaded event, which o-header-services listens for.

You'll need to set up your header declaratively, as the JavaScript for o-header-services does not construct it for you.

The JavaScript is responsible for generating the drawer and enabling scrolling on the secondary navigation. You can implement that with the following:

const oHeaderServices = require('o-header-services');

oHeaderServices.init();

Migration

State Major Version Last Minor Release Migration guide
✨ active 3 N/A migrate to v3
⚠ maintained 2 2.3 migrate to v2
╳ deprecated 1 1.2 N/A

Contact

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

Licence

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

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.

If running a Manual Build, run bower install --save "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