Open primary navigation
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.

Open demo in a new tab

Mega menu

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

Open demo in a new tab

Header with subnav

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

Open demo in a new tab

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.

Open demo in a new tab

Logo only header

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

Open demo in a new tab

Simple header

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

Open demo in a new tab

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.

Open demo in a new tab

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.

Open demo in a new tab
Status
active
Switch component view

GitHub: o-header@11.0.6

Install o-header

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

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