Origami Frontend Components & Services

Demos: o-header

Header

Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

Mega menu

Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

Header with subnav

Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

Header with subnav and right aligned items

The subnav may have right aligned actions, for example to sign out of an admin area. Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

Simple header

Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

Simple transparent (inverse) header

The "transparent" header is useful for use on dark backgrounds. This variant doesn't support the drawer. Please speak to Origami if you would like to add drawer support to this variant. Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

Sticky header

Sticky variation of the simple header. Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

Subbranded header

For Subbrands of the FT, eg Alphaville or Life&Arts, a subheader can be added to mark out their subbrandness. Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

Status
active
Switch component view

GitHub Repository

Install o-header

If using the Build Service, add o-header@^9.0.3 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@^9.0.3".

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