// The main template
{% include '@bolt-components-page-footer/page-footer.twig' with {
description: description, // Heading and description text goes here
primary_nav: primary_nav, // Use page-footer-nav-ul.twig to render each set of navigation list
secondary_nav: secondary_nav, // Use page-footer-nav-ul.twig to render each set of navigation list
} only %}
// Nav list template
{% include '@bolt-components-page-footer/page-footer-nav-ul.twig' with {
headline: {
content: 'Company',
tag: 'h3',
},
content: content, // Use page-footer-nav-li.twig to render each link
category: category, // Set the category for a particular list of navigation
} only %}
// Nav list item template
{% include '@bolt-components-page-footer/page-footer-nav-li.twig' with {
link: {
content: 'Facebook',
icon_before: icon_facebook, // Only render an icon if page-footer-nav-ul.twig category is set to social
attributes: {
href: 'https://www.facebook.com/pegasystems',
},
},
} only %}kebab-case.
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
|
attributes
|
A Drupal attributes object. Applies extra HTML attributes to the parent element. |
object
| — |
|
|
description
|
Accept any types of value, plain text is the simplest usage. |
any
| — |
|
|
primary_nav
|
Render the primary navigation. Use page-footer-nav-ul.twig to render each set of navigation list. |
any
| — |
|
|
secondary_nav
|
Render the secondary navigation. Use page-footer-nav-ul.twig to render each set of navigation list. |
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 the nav list. Use page-footer-nav-li.twig to render each link. |
any
| — |
|
|
category
|
Set the category for the nav list. Only needed for social links, language links, and legal links. |
string
| — |
|
|
headline
|
Headline of the nav list. This must be set for each nav list. |
object
| — |
|
|
open
|
Set to true if a nav list needs to be expanded by default in mobile view. |
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 list item. Passing the "href" attribute will turn it into a semantic link and passing the "type" attribute will turn it into a semantic button. |
object
| — |
|
npm install @bolt/components-page-footer// The main template
{% include '@bolt-components-page-footer/page-footer.twig' with {
description: description, // Heading and description text goes here
primary_nav: primary_nav, // Use page-footer-nav-ul.twig to render each set of navigation list
secondary_nav: secondary_nav, // Use page-footer-nav-ul.twig to render each set of navigation list
} only %}
// Nav list template
{% include '@bolt-components-page-footer/page-footer-nav-ul.twig' with {
headline: {
content: 'Company',
tag: 'h3',
},
content: content, // Use page-footer-nav-li.twig to render each link
category: category, // Set the category for a particular list of navigation
open: true, // Set to true if a nav list needs to be expanded by default in mobile view
} only %}
// Nav list item template
{% include '@bolt-components-page-footer/page-footer-nav-li.twig' with {
link: {
content: 'Facebook',
icon_before: icon_facebook, // Only render an icon if page-footer-nav-ul.twig category is set to social
attributes: {
href: 'https://www.facebook.com/pegasystems',
},
},
} only %}