eServices Portal | Gouvernement des Territoires du Nord-Ouest

The GNWT eServices Portal is a third-party platform that hosts government online services. To help the portal look and feel like gnwt.ca and build user trust, the GNWT Design System provides ready-to-use header and footer code and a CSS bundle that can be applied directly to the platform.

How the header and footer work on the portal

The portal uses a static version of the GNWT header and footer made up of three components:

HTML snippets: Provide the header and footer structure and menu content
CSS bundle: Controls the visual styling
Hosted scripts: Enable interactive header features

HTML snippets

The HTML snippets are copied directly from this documentation. Each authentication state and language version has its own snippet. The snippets include absolute URLs in all navigation links so they work correctly when used outside of gnwt.ca.

The snippets capture the state of the GNWT navigation menus at the time they are downloaded. They do not update automatically. When the GNWT navigation changes, the portal vendor will need to download and re-apply the updated snippets.

CSS bundle

The GNWT eServices Design System CSS bundle styles the header and footer to match gnwt.ca. Because the portal is built on Bootstrap 5, the bundle also overrides common Bootstrap UI elements such as typography, buttons, and form controls. This brings the portal's in-page content closer to the GNWT look and feel without requiring any changes to the platform's HTML.

Bootstrap utility classes (such as mb-4 or text-center) are intentionally excluded from the bundle. This keeps the bundle size small and avoids conflicts with the portal's own use of Bootstrap utilities.

The bundle uses semantic versioning. The version number appears in the file name and in a comment at the top of the file.

Hosted scripts

GNWT hosts the JavaScript files that make the header interactive. The scripts handle the menu toggle, search toggle, language toggle, and user menu link paths. They are served from a versioned URL path on gnwt.ca and are cached by Google CDN for availability.

Platform considerations

Turbo

The eServices Portal uses Turbo to handle page navigation. Turbo speeds up navigation by replacing only the changed parts of the page instead of doing a full browser reload. Because of this, standard browser page load events do not fire on every navigation.

The GNWT hosted scripts are built to handle this. They listen for Turbo's turbo:load event and re-apply interactive behaviour each time Turbo completes a navigation. If the scripts are updated or replaced, confirm that the new scripts preserve this behaviour. Without it, interactive header features will stop working after the user navigates away from the first page they land on.

Bootstrap 5

The portal uses Bootstrap 5 as its base UI framework. The GNWT eServices Design System CSS bundle includes styles that override Bootstrap defaults to align the portal's look and feel with gnwt.ca. This covers elements like typography and font family, as well as common UI components like buttons and form fields.