@canonical/global-nav
Advanced tools
A script and stylesheet that displays the Canonical global nav across the top of a site
This project contains the JavaScript and styles to add an "All Canonical" navigation dropdown item to the Vanilla navigation pattern.
The dropdown contains 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>.
yarn add @canonical/global-nav
...or...
npm install @canonical/global-nav --save
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>
<script>
canonicalGlobalNav.createNav();
</script>
To import it, simply call it from your site-wide JS file;
import { createNav } from '@canonical/global-nav';
createNav();
.global-nav class to a ul.p-navigation__items element within the navigation pattern. The module will look for this class and add the dropdown as the first item in the list.The createNav function takes an object of options with the following property:
breakpoint: The point, in pixels, at which the navigation switches between desktop and mobile layouts. The default is 620px, which is meant to reflect the default value of $breakpoint-navigation-threshold in Vanilla (see Vanilla's breakpoint documentation).If the $breakpoint-navigation-threshold Vanilla variable is overridden in your project, you will need to set this option on the global nav.
For example, to set the breakpoint to 1036:
<script src="/node_modules/@canonical/global-nav/dist/index.js"></script>
<script>
canonicalGlobalNav.createNav({ breakpoint: 1036 });
</script>
If you're importing;
import { createNav } from '@canonical/global-nav';
createNav({ breakpoint: 1036 });
To build the JS into the /dist folder, run:
./run build
The simplest 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:
./run
You can also use the dotrun snap, by running:
dotrun
Once the containers are setup, you can visit http://127.0.0.1:8300 in your browser.
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
Just because this was a bit of a pain, here is what I did.
" to single ' - CRITICALdata:image/svg+xml, in the right place in product-details.jsThe 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
FAQs
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Socket now integrates with Bun 1.3’s Security Scanner API to block risky packages at install time and enforce your organization’s policies in local dev and CI.
Research
The Socket Threat Research Team is tracking weekly intrusions into the npm registry that follow a repeatable adversarial playbook used by North Korean state-sponsored actors.