Page Header

Global header that contains the global search, primary navigation, and secondary navigation.

Published Last updated: 4.4.0 Change log Github NPM
Twig Usage 
  {% include '@bolt-components-page-header/page-header.twig' with {
  logo: {
    image_src: '/images/logos/pega-logo.svg',
    label: 'Pegasystems',
    attributes: {
      href: 'https://pega.com',
    }
  },
  content: primary_nav_and_search_panel,
  cta: cta_button,
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Page Header (page-header.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content *

Primary content of page header. Primary nav and search panel are expected here.

 any —
  • —
secondary_content

Secondary content of page header (sub nav, visible search bar, breadcrumbs, etc.).

 any —
  • —
logo *

Set the site logo. This can be turned into a link by passing the "href" attribute.

 object —
    • attributes

      A Drupal attributes object. Applies extra HTML attributes to the parent element.

      • —
    • image_src

      Set the path to the logo image.

      • —
    • label

      Set a label (visually hidden) for the logo.

      • —
subheadline

Text or other content to display next to the logo.

 any —
  • —
cta

Set the main call-to-action. Button element is expected here.

 any —
  • —
static

Set the page header to be static instead of sticky.

 boolean false
  • —
full_width

Set the page header width to span across the full viewport.

 boolean false
  • —
Page Header Primary Nav (page-header-primary-nav.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content *

Content of page header primary nav. Nav ul are expected here.

 any —
  • —
align_site_nav_items

Set the site nav item alignment. This only applies to child nav ul with the category prop set to "site", it has no effects on other categories.

 string —
  • start, center, end
Page Header Search Panel (page-header-search-panel.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content *

Content of page header search panel. Typeahead or some kind of search input is expected here.

 any —
  • —
Page Header Nav ul (page-header-nav-ul.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content *

Content of page header nav ul. Nav li are expected here.

 any —
  • —
category

Indicate which set of navigation this nav ul is rendering.

 string —
  • site, related-sites, user
popover_position

Set the position of the nav ul if the parent nav li has the popover prop set to "true". This only applies if the nav ul is a child of a nav li.

 string —
  • edge-start or edge-end
wrap_site_nav_items

Allow the site nav items to wrap once it runs out of available space. This only applies when category is set to "site", it has no effects on other categories.

 boolean false
  • —
Page Header Nav li (page-header-nav-li.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
link

Link of the nav li. Passing the "href" attribute will turn it into a semantic link. This prop will be overridden by the content prop.

 object —
    • attributes

      A Drupal attributes object. Applies extra HTML attributes to the parent element.

      • —
    • content

      Content of the link.

      • —
    • desktop_heading

      Indicate if the link should also act as a heading for the children in desktop view. This has no effects in mobile view. This only applies if flat is "false", child nav ul is passed, and its category is set to "site".

      • —
    • signifier_before

      Append an signifier before the link content. Icon element is expected here.

      • —
    • signifier_after

      Append an signifier after the link content. Icon element is expected here.

      • —
    • signifier_only

      Append an signifier to the link content and visually hide the text content. Icon element is expected here. This prop trumps signifier_before and signifier_after.

      • —
    • counter

      Display a red dot counter. Only use this when there is a signifier.

      • —
children

Append children for the nav li. Nav ul can be passed here. This must be used in tandem with the link prop.

 any —
  • —
content

Content of the nav li. Use this only if the nav li is not a link, instead it is some kind of layouts such as a card. This prop will override the link prop.

 any —
  • —
current

Set the nav li as the current item. This only applies if its parent nav ul category is set to "site", it has no effects on other categories.

 boolean false
  • —
full_width

Set the nav li width to full. This only applies if its parent nav ul category is set to "site", it has no effects on other categories.

 boolean false
  • —
view_all

Style the nav li as the "view all" item. This should only be used on "view all" links.

 boolean false
  • —
popover

Indicate if the nav li is a popover. This only applies if nav ul category is set to "related-sites" or "user".

 boolean false
  • —
selected

Set the nav li as the selected item. This only applies if nav ul category is set to "user" and the nav li is rendering the language select.

 boolean false
  • —
flat

Indicate if the nav ul is a flat list (no nesting at all). This only applies if its parent nav ul category is set to "site", it has no effects on other categories.

 boolean false
  • —
Install Install 
  npm install @bolt/components-page-header
Dependencies @bolt/components-typeahead @bolt/core-v3.x hoverintent