Configure headers and footers

Headers

Ontario.ca Frontend includes three pre-configured headers for your project's pages:

the Ontario.ca header (mandatory for all applications that are deployed to Ontario.ca)
the application header (for applications not deployed to Ontario.ca)
the ServiceOntario header (for ServiceOntario applications)

By default, Ontario.ca Frontend initializes new projects using the Ontario.ca header.

Using non-default headers

Global configuration

To use a different header across all pages in your project:

In your globals.js file, set useApplicationHeader to true.
Set the applicationHeaderType value to either default (for the application header) or serviceOntario.

src/_data/globals.js

module.exports = () => {  ...  const useApplicationHeader = true;  const applicationHeaderType = 'default';  ...    return {    ...    useApplicationHeader,    applicationHeaderType,    ...  };}

Page-specific configuration

If you need a page on your site to have a different header from the one that's set in globals.js, you can specify your desired header for a particular page in the page's front matter.

src/my-new-page.njk

---...useApplicationHeader: true---

Customizing the application header

Both the application header and the ServiceOntario header display your project's application name and a set of menu links. These can be configured using the using the applicationHeader key in localization/homepage-locale-strings.json.

src/_data/localization/homepage-locale-strings.json

{  "header": {    ...    "applicationHeader": {      "applicationName": {        "en": "Application name",        "fr": "Nom de l'application"      },      "applicationUrl": {        "en": "/example-pages/jamstack-toolkit-app-header",        "fr": "/pages-dexemple/boite-a-outils-jamstack-app-header"      }    },    "navMenu": {      "link1": {        "url": {          "en": "https://ontario.ca/page/arts-and-culture",          "fr": "https://ontario.ca/fr/page/affaires-et-economie"        },        "text": {          "en": "Arts and culture",          "fr": "Affaires et économie"        }      },      "link2": {        "url": {          "en": "https://ontario.ca/page/business-and-economy",          "fr": "https://ontario.ca/fr/page/arts-et-culture"        },        "text": {          "en": "Business and economy",          "fr": "Arts et culture"        }      }    }  }}

Footers

As with headers, Ontario.ca Frontend supports two pre-configured footer styles for your project's pages:

a simple footer (with links to accessibility, privacy and copyright information)
an expanded footer (with links to additional site-specific information)

By default, Ontario.ca Frontend initializes new projects using the simple footer.

Using the expanded footer

Global configuration

To use the expanded footer, navigate to your globals.js file and set footerType to expanded.

src/_data/globals.js

module.exports = () => {  ...  const footerType = 'expanded';  ...    return {    ...    footerType,    ...  };}

Page-specific configuration

If you need a page on your site to have a different footer from the one that's set in globals.js, you can specify your desired footer for a particular page in the page's front matter.

src/my-new-page.njk

---...footerType: expanded---

Customizing the expanded footer

You can use expanded footer to include additional content using the template in app/_footer_expanded_content.njk.

src/_includes/app/_footer_expanded_content.njk

<div class="ontario-row">    <div class="ontario-columns ontario-small-12 ontario-medium-6">        <h2 class="ontario-h4">{{ 'expandedFooter.ontarioGovernment' | localeString }}</h2>        <p>{{ 'expandedFooter.ontarioGovernmentDescription' | localeString | safe }}</p>    </div>    <div class="ontario-columns ontario-small-12 ontario-medium-6">        <h2 class="ontario-h4">{{ 'expandedFooter.contactUs' | localeString }}</h2>        <p>{{ 'expandedFooter.contactUsDescription' | localeString | safe }} </p>        <a class="ontario-footer__button ontario-button ontario-margin-bottom-0-!" href="#">{{ 'expandedFooter.findAMinistry' | localeString }}</a>    </div></div>

_footer_expanded_content.njk includes boilerplate markup that you can customize with content or links that are relevant to your project. Be sure to review the Ontario Design System guidance on expanded footers before making any changes.