Page Footer

Global footer that contains Pega description, main navigation, secondary navigation and social media links

Published Last updated: 4.5.0 Change log Github NPM
Twig Usage // 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 %} Schema Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Page Footer (page-footer.twig)
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 —
  • —
Page Footer Nav ul (page-footer-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 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 —
  • social, language, legal
headline

Headline of the nav list. This must be set for each nav list.

 object —
    • attributes

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

      • —
    • content

      Set the headline for the nav list.

      • —
    • tag

      Set the semantic HTML tag for the headline.

      • h1, h2, h3, h4, h5, h6
Page Footer Nav li (page-footer-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 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 —
    • attributes

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

      • —
    • content

      Set the label text for the link.

      • —
    • icon_before

      Set an icon before a social link.

      • —
Install Install npm install @bolt/components-page-footer Dependencies @bolt/core-v3.x @bolt/elements-icon