Skip to content
A script and stylesheet that displays the Canonical global nav across the top of a site
Branch: master
Clone or download
Latest commit 4e7336e Jul 18, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src remove www. from u.c urls Jun 20, 2019
test Prettify all the things Feb 1, 2019
.env Add run script to the project Jun 13, 2019
.gitignore Add run script to the project Jun 13, 2019
.npmignore Pack files to dist folder when publishing Jul 31, 2018
.prettierignore Add dist to .prettierignore Feb 2, 2019
.prettierrc Prettify all the things Feb 1, 2019
.travis.yml Update README to reflect test Jun 17, 2019
index.html Add run script to the project Jun 13, 2019
package.json Upgrade babel Jul 11, 2019
renovate.json Update renovate to monthly and group all May 3, 2019
rollup.config.js Upgrade babel Jul 11, 2019
run Add run script to the project Jun 13, 2019
yarn.lock Upgrade babel Jul 11, 2019

Canonical Global Nav

This project contains the JavaScript and styles to display a banner across the top of a page.

This banner displays a list of Canonical eco-system websites giving a user the ability to jump around the core sites easily.


Use a node package manager to install this component and then link the JS file into the head of your site, with optional settings.

The styles will automatically be injected into the page's <head>.

  1. Install via yarn or npm
yarn add @canonical/global-nav


npm install @canonical/global-nav --save
  1. You can then install the library either by directly linking to it or via ES6 imports.

To consume the library directly, add a link to the JS file containing an IIFE and run the canonicalGlobalNav.createNav() function;

<script src="/node_modules/@canonical/global-nav/dist/iife.js"></script>

To import it, simply call it from your site-wide JS file;

import { createNav } from '@canonical/global-nav';


The createNav function takes an object of options with the following properties:

  • maxWidth: The max-width of the global nav element (default: 68rem)
  • showLogins: Should the "logins" drop-down be shown? (default: false)

For example, to use the global-nav without the "login" section, and set the max-width to 80rem:

<script src="/node_modules/@canonical/global-nav/dist/index.js"></script>

  canonicalGlobalNav.createNav({ showLogins: false, maxWidth: '80rem' });

If you're importing;

import { createNav } from '@canonical/global-nav';
createNav({ showLogins: false, maxWidth: '80rem' });

Building the Global nav

To build the JS into the /dist folder, run:

##implest way to run the site locally is to first install Docker (on Linux you may need to add your user to the docker group), and then use the ./run script:


Once the containers are setup, you can visit in your browser.

Watching changed files

For working on Sass files and JS files , you may want to dynamically watch for changes to rebuild the dist files whenever something changes.

To setup the watcher, open a new terminal window and run:

./run watch

Before submitting your pull request, run the tests - which checks both the JS and Sass for errors.

./run test

How to add inline svgs

Just because this was a bit of a pain, here is what I did.

  1. Shrink the svg as much as possible
  2. Upload it to the asset server for others - OPTIONAL
  3. View it in a browser and grab the source code.
  4. Convert the quotes from double " to single ' - CRITICAL
  5. Encode the svg
  6. Add this with data:image/svg+xml, in the right place in product-details.js

Release process

The package is versioned using semantic versioning and published to the NPM registry.

To cut a new release run;

npm version [patch|minor|major]

This will trigger the prepublishonly script which will ensure requisite artefacts are built before publishing.

Code licensed LGPLv3 by Canonical Ltd.

With ♥ from Canonical

You can’t perform that action at this time.