global-nav
Advanced tools
Readme
This project contains the JavaScript and styles to display a banner across the top of a page.
This banner displays a list of corporate eco-system websites giving a user the ability to jump around the core sites easily.
Simply 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 global-nav
npm install 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/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 'global-nav';
createNav();
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/global-nav/dist/index.js"></script>
<script>
canonicalGlobalNav.createNav({ showLogins: false, maxWidth: '80rem' });
</script>
If you're importing;
import {createNav} from 'global-nav';
createNav({ showLogins: false, maxWidth: '80rem' });
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/js/*.js and src/sass/*.scss and builds them into the /dist folder.
yarn watch
Before submitting your pull request. Run the lint, which checks both the JS and Sass for errors.
yarn lint
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.jsIf you would like to help improve this project, here is a list of commands to help you get started.
Code licensed LGPLv3 by Canonical Ltd.
With ♥ from Canonical
FAQs
A script and stylesheet that displays the Canonical global nav across the top of a site
The npm package global-nav receives a total of 2,045 weekly downloads. As such, global-nav popularity was classified as popular.
We found that global-nav demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
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.
Security News
The White House is addressing fragmented cybersecurity regulations as CISOs report spending up to 50% of their time on compliance, aiming to harmonize requirements and improve cybersecurity outcomes.
Security News
Research
The Socket Research Team has identified a malicious Python package that is typosquatting the popular crytic-compile utility, frequently used in popular toolkits and development environments for smart contracts and crypto applications.
Security News
NIST updates on the NVD backlog after media reports that over 50% of KEVs were unenriched since mid-February. They've contracted additional support and partnered with CISA to clear the backlog by fiscal year-end.