{% 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 %}
| 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. |
string
, array
, object
|
— |
|
|
secondary_content
|
Secondary content of page header (sub nav, visible search bar, breadcrumbs, etc.). |
string
, array
, object
|
— |
|
|
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. |
object
| — |
|
|
theme
|
Set the color theme of the page header. |
string
| — |
|
|
static
|
Set the page header to be static instead of sticky. |
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. |
string
, array
, object
|
— |
|
| 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. |
string
, array
, object
|
— |
|
| 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. |
string
, array
, object
|
— |
|
|
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 popover set to "true". This only applies if the nav ul is a child of a nav li. |
string
| — |
|
|
flat
|
Indicate if the nav ul is a flat list (no nesting at all). This only applies when category is set to "site", it has no effects on other categories. |
boolean
|
false
|
|
|
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 link. |
object
| — |
|
|
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. |
string
, array
, object
|
— |
|
|
current
|
Set the nav li as the current item. This only applies if nav ul category is set to "site". |
boolean
|
false
|
|
|
full_width
|
Set the nav li width to full. This only applies if nav ul category is set to "site". |
boolean
|
false
|
|
|
view_all
|
Set 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
|
|
npm install @bolt/components-page-header