You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

global-nav

Package Overview
Dependencies
0
Maintainers
7
Versions
16
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

global-nav

A script and stylesheet that displays the Canonical global nav across the top of a site


Version published
Maintainers
7
Created

Readme

Source

Canonical Ltd 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 corporate eco-system websites giving a user the ability to jump around the core sites easily.

Usage

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>.

  1. Install via yarn or npm
yarn add global-nav
npm install 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/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();

Options

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' });

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.

Hacking

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

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

Contributing

If 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

Package last updated on 06 Mar 2019

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc