{% include '@bolt-components-page-header/page-header.twig' with {
logo: {
image_src: '/images/logos/pega-logo.svg',
label: 'Pegasystems',
attributes: {
href: 'https://google.com',
}
},
content: primary_nav_and_search_panel,
cta: cta_button,
} only %}| 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
| — |
|
|
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
|
|
| 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
| — |
|
| 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
| — |
|
| 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
| — |
|
|
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
| — |
|
|
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
|
|
| 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
| — |
|
|
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
|
|
npm install @bolt/components-page-headerpx, em, and rem unit values are supported in addition to tokens. These properties must be defined at the :root level.
// Reference each template's schema to learn about each props.
// The main template
{% include '@bolt-components-page-header/page-header.twig' with {
logo: {
image_src: '/images/logos/pega-logo.svg',
label: 'Pegasystems',
attributes: {
href: 'https://google.com',
}
},
subheadline: 'Subheadline text',
content: primary_nav_and_search_panel,
secondary_content: secondary_nav,
cta: cta_button,
static: true,
full_width: true,
} only %}
// Search panel template (pass to main template's content prop)
{% include '@bolt-components-page-header/page-header-search-panel.twig' with {
content: content,
} only %}
// Primary nav template (pass to main template's content prop)
{% include '@bolt-components-page-header/page-header-primary-nav.twig' with {
content: content,
align_site_nav_items: align_site_nav_items,
} only %}
// Nav ul template (pass to primary nav template's content prop)
{% include '@bolt-components-page-header/page-header-nav-ul.twig' with {
content: content,
category: category,
popover_position: popover_position,
} only %}
// Nav li template (pass to nav ul template's content prop)
{% include '@bolt-components-page-header/page-header-nav-li.twig' with {
link: {
content: 'Products',
counter: true,
signifier_before: icon_before,
signifier_only: icon_only,
attributes: {
href: 'https://google.com/products',
},
},
children: children,
content: content,
view_all: false,
full_width: false,
popover: false,
flat: false,
selected: false,
current: true,
} only %}