Canonical Global Nav
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
- Install via yarn or npm
yarn add @canonical/global-nav
npm install @canonical/global-nav --save
- 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
To import it, simply call it from your site-wide JS file;
createNav function takes an object of options with the following properties:
maxWidth: The max-width of the global nav element (default:
showLogins: Should the "logins" drop-down be shown? (default:
For example, to use the global-nav without the "login" section, and set the
If you're importing;
Building the Global nav
To build the JS into the
/dist folder, run:
yarn install yarn build
You can view the build files in action by opening the
index.html in the root of this project.
When developing this project you can run the following command to listen to changes in the
src/sass/*.scss files and build them into the
Before submitting your pull request, run the linters - which checks both the JS and Sass for errors.
How to add inline svgs
Just because this was a bit of a pain, here is what I did.
- Shrink the svg as much as possible
- Upload it to the asset server for others - OPTIONAL
- View it in a browser and grab the source code.
- Convert the quotes from double
- Encode the svg
- Add this with
data:image/svg+xml,in the right place in product-details.js
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