Navigation block

The vf-navigation component is a horizontal list of links to key pages of the website.

github location npm version

Usage

Global navigation variant

This variant of the vf-navigation is to be used as part of the vf-global-header to give a few 'quick links' that will be on every page.

Main navigation variant

This variant of the vf-navigation can be used to link to sections of the site, or part of the site the parent section.

This is typically placed below the vf-hero component but can be also found below the vf-global-header.

There should be only one use of vf-navigation--main on a page.

On this page navigation variant

The vfNavigationOnThisPage JavaScript adds a quality-of-life improvement by automatically activating sections as the user scrolls them into view on the page. This sticky element allows users to quickly jump between sections on longer pages.

  • There should be only one use of vf-navigation--on-this-page on a page.
  • Anchor targets need an element id: id="container-1". This can be added to any item on the page, but would most logically be added to a vf-grid, embl-grid or vf-section-header element.
  • Ensure data-vf-js-navigation-on-this-page-container="true" is present on .vf-navigation__list.
  • Ensure each anchor link has a data-vf-js-navigation-on-this-page-link.

Variants

Global variant

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"exampleMultiColumns" : "false",
"component-type" : "block",
"classModifier" : "global",
"navigation" : [object Object],[object Object],[object Object],[object Object],
 }
%}
{% include "../path_to/vf-navigation/vf-navigation.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-navigation', {
  "exampleMultiColumns" : "false",
  "component-type" : "block",
  "classModifier" : "global",
  "navigation" : [object Object],[object Object],[object Object],[object Object],}
%}
HTML 
<nav class="vf-navigation vf-navigation--global | vf-cluster">
  <ul class="vf-navigation__list | vf-list | vf-cluster__inner">
    <li class="vf-navigation__item">
      <a href="JavaScript:Void(0);" class="vf-navigation__link">Services</a>
    </li>
    <li class="vf-navigation__item">
      <a href="JavaScript:Void(0);" class="vf-navigation__link">Research</a>
    </li>
    <li class="vf-navigation__item">
      <a href="JavaScript:Void(0);" class="vf-navigation__link">Training</a>
    </li>
    <li class="vf-navigation__item">
      <a href="JavaScript:Void(0);" class="vf-navigation__link">About us</a>
    </li>
  </ul>
</nav>

Main variant

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"exampleMultiColumns" : "false",
"component-type" : "block",
"classModifier" : "main",
"navigation" : [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],
 }
%}
{% include "../path_to/vf-navigation/vf-navigation.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-navigation', {
  "exampleMultiColumns" : "false",
  "component-type" : "block",
  "classModifier" : "main",
  "navigation" : [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],}
%}
HTML 
<nav class="vf-navigation vf-navigation--main | vf-cluster">
  <ul class="vf-navigation__list | vf-list | vf-cluster__inner">
    <li class="vf-navigation__item">
      <a href="JavaScript:Void(0);" class="vf-navigation__link" aria-current="page">Home</a>
    </li>
    <li class="vf-navigation__item">
      <a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
    </li>
    <li class="vf-navigation__item">
      <a href="JavaScript:Void(0);" class="vf-navigation__link">Release Notes</a>
    </li>
    <li class="vf-navigation__item">
      <a href="JavaScript:Void(0);" class="vf-navigation__link">FAQ</a>
    </li>
    <li class="vf-navigation__item">
      <a href="JavaScript:Void(0);" class="vf-navigation__link">Help</a>
    </li>
    <li class="vf-navigation__item">
      <a href="JavaScript:Void(0);" class="vf-navigation__link">Licence</a>
    </li>
    <li class="vf-navigation__item">
      <a href="JavaScript:Void(0);" class="vf-navigation__link">About</a>
    </li>
    <li class="vf-navigation__item">
      <a href="JavaScript:Void(0);" class="vf-navigation__link">Feedback</a>
    </li>
  </ul>
</nav>

On This Page variant

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"exampleMultiColumns" : "false",
"component-type" : "block",
"heading" : "On this page",
"classModifier" : "on-this-page",
"activateJavascript" : false,
"navigation" : [object Object],[object Object],[object Object],
 }
%}
{% include "../path_to/vf-navigation/vf-navigation.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-navigation', {
  "exampleMultiColumns" : "false",
  "component-type" : "block",
  "heading" : "On this page",
  "classModifier" : "on-this-page",
  "activateJavascript" : false,
  "navigation" : [object Object],[object Object],[object Object],}
%}
HTML 
<nav class="vf-navigation vf-navigation--on-this-page | vf-u-fullbleed | vf-cluster">
  <ul class="vf-navigation__list | vf-list | vf-cluster__inner" data-vf-js-navigation-on-this-page-container="false">
    <li class="vf-navigation__item">

      On this page
    </li>
    <li class="vf-navigation__item">
      <a href="#container-1" class="vf-navigation__link">Anchor 1</a>
    </li>
    <li class="vf-navigation__item">
      <a href="#container-2" class="vf-navigation__link" aria-selected="true">Anchor 2</a>
    </li>
    <li class="vf-navigation__item">
      <a href="#container-3" class="vf-navigation__link">Anchor 3</a>
    </li>
  </ul>
</nav>

Examples

On This Page Example

Home

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget massa dolor. Morbi suscipit lorem in volutpat sollicitudin. Pellentesque cursus consequat mi, sed lobortis enim aliquet ac. Morbi eu tincidunt lorem. Cras eget leo rhoncus, ultrices erat quis, commodo lorem. Fusce placerat urna vitae eleifend tincidunt. Integer lobortis erat in ante mollis, in tincidunt erat varius. Cras quis erat ac lorem mollis vulputate. Fusce pulvinar condimentum cursus.

Vivamus gravida scelerisque nibh eu blandit. Vivamus et varius mi. Vivamus ut dictum leo, vitae commodo leo. Curabitur sed diam tristique velit laoreet cursus. Pellentesque ultricies ullamcorper neque malesuada scelerisque. Proin varius sodales ante, sed accumsan risus dapibus sed. Nam eget dignissim tortor, sed pulvinar sapien. In congue, augue in lacinia congue, nunc lacus sagittis lacus, et gravida tortor nisl vitae turpis. Donec id libero tempor orci bibendum interdum. Sed nisl purus, tempor quis enim quis, laoreet fermentum lacus.

Downloads

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget massa dolor. Morbi suscipit lorem in volutpat sollicitudin. Pellentesque cursus consequat mi, sed lobortis enim aliquet ac. Morbi eu tincidunt lorem. Cras eget leo rhoncus, ultrices erat quis, commodo lorem. Fusce placerat urna vitae eleifend tincidunt. Integer lobortis erat in ante mollis, in tincidunt erat varius. Cras quis erat ac lorem mollis vulputate. Fusce pulvinar condimentum cursus. Proin quis ligula lacinia, elementum eros dignissim, pretium libero. Vivamus dignissim nisi urna, sed elementum nisi egestas sed. Nulla at sagittis leo. Sed ut odio a libero pretium tempus at in odio. Praesent suscipit tellus urna, non eleifend enim fringilla in. Ut interdum, arcu a suscipit accumsan, metus felis aliquet tellus, quis maximus est massa nec eros. Duis egestas, elit ut tempor lobortis, dolor ligula iaculis nulla, at hendrerit enim diam eu sapien.

Cras ultrices cursus odio, vel cursus justo ultrices ut. Vestibulum non eros eu nunc tristique bibendum. Integer leo neque, varius et varius molestie, mattis eu orci. Suspendisse ullamcorper augue ut ex eleifend iaculis. Donec lacus dolor, sodales id urna ut, placerat eleifend nisi. Aliquam sollicitudin nibh sodales ex sagittis aliquet. Etiam nec tempor metus. Nam quis tincidunt massa, fringilla fringilla metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Release notes

Sed fringilla pretium quam vehicula viverra. Etiam sed augue vitae ante consectetur auctor id eget urna. Vestibulum bibendum vulputate ultrices. Proin euismod est felis, eu egestas ligula laoreet eu. Sed eget tincidunt libero, in posuere mauris. Phasellus vel urna faucibus nunc congue pulvinar. Aliquam massa ipsum, euismod semper arcu nec, luctus hendrerit nisl. Vivamus ultrices mattis dui at sagittis. Phasellus ac erat dui. Aliquam erat volutpat. Cras ac elit non quam maximus congue. Sed mi justo, bibendum eu lacinia nec, lobortis ac purus. Duis elementum orci sit amet pulvinar malesuada. Mauris luctus risus et ipsum eleifend pharetra.

Cras ultrices cursus odio, vel cursus justo ultrices ut. Vestibulum non eros eu nunc tristique bibendum. Integer leo neque, varius et varius molestie, mattis eu orci. Suspendisse ullamcorper augue ut ex eleifend iaculis. Donec lacus dolor, sodales id urna ut, placerat eleifend nisi. Aliquam sollicitudin nibh sodales ex sagittis aliquet. Etiam nec tempor metus. Nam quis tincidunt massa, fringilla fringilla metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Another item

Cras ultrices cursus odio, vel cursus justo ultrices ut. Vestibulum non eros eu nunc tristique bibendum. Integer leo neque, varius et varius molestie, mattis eu orci. Suspendisse ullamcorper augue ut ex eleifend iaculis. Donec lacus dolor, sodales id urna ut, placerat eleifend nisi. Aliquam sollicitudin nibh sodales ex sagittis aliquet. Etiam nec tempor metus. Nam quis tincidunt massa, fringilla fringilla metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Installation info

This component is distributed with npm. After installing npm, you can install the vf-navigation with this command.

$ yarn add --dev @visual-framework/vf-navigation

Sass/CSS

The source files included are written in Sass(scss). You can point your Sass include-path at your node_modules directory and import it like this.

@import "@visual-framework/vf-navigation/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

JavaScript

If using the vf-navigation--on-this-page variant, you should import this component in ./components/vf-component-rollup/scripts.js or your other JS process:

import { vfNavigationOnThisPage } from "vf-navigation/vf-navigation.js";
// Or import directly
// import { vfGaIndicateLoaded } from '../components/raw/vf-navigation/vf-navigation.js';

vfNavigationOnThisPage();

Changelog

Changelog

5.0.0-rc.1

  • Removed: Attribute data-vf-js-navigation-on-this-page-link for vf-navigation--on-this-page
  • Changed: Improved accuracy of vf-navigation--on-this-page scrollspy, use existing attribute to get navigation links
  • Changed: Improve scrolling into an element when clicking a link of vf-navigation--on-this-page, take into account margin/padding

4.0.0-rc.1 [YANKED]

  • Make vf-navigation--on-this-page more dynamic and reactive with data-vf-js-navigation-on-this-page-link.

3.0.0-rc.2

  • Fixed bug where the vf-navigation component was getting overlapped by other components.
  • https://github.com/visual-framework/vf-core/issues/1755

3.0.0-rc.1

  • Give vf-navigation--on-this-page a bigger bottom margin on desktop as vf-u-fullbleed eats a bit of bottom margin by its nature.
  • https://github.com/visual-framework/vf-core/pull/1732

3.0.0-rc.0

  • Introduces vf-navigation--on-this-page.
  • Removes vf-navigation--additional.
  • https://github.com/visual-framework/vf-core/issues/1623

3.0.0-beta.2

  • Minor README.md update.

3.0.0-beta.1

  • Re-release of 3.0.0-beta.0 to fix garbled version number.
  • Fixes a broken Sass file reference.
  • https://github.com/visual-framework/vf-core/issues/1469

3.0.0-beta.0

  • deprecated the --additional variant.
  • removes --main and --global Sass files, incorporating them into the base stylesheet.
  • tidies up quite a bit of CSS.
  • makes use of vf-cluster for layout in the markup.
  • adds some documentation.

2.2.2

  • Fixes CSS to match stylelint rules.
  • https://github.com/visual-framework/vf-core/pull/1405

2.2.1

  • changes any set- style functions to cleaner version

2.2.0

  • removes bottom margin for --main.
  • replaces padding with margin for --main.
  • duplicates the top margin for --main because sometimes it's out of the vf-stack flow.

2.1.0

  • fixes a bug with the --additional variant.
  • introduces njk/yml variable look up to determine classnames to use:
  • adds vf-cluster only to --main variant.
  • replaces --additional CSS for full bleed background with vf-u-fullbleed class.

2.0.0

  • increases font size for --main.
  • removes all variants of --main.
  • adds vf-cluster to the component for responsive layout
  • adds aria-current="page" rule and CSS to denote the current page.
  • adds :hover to links.

1.2.5

  • updates max-width of component variants

1.2.4

  • updates max-width of component

1.2.3

  • adds margin-left: auto for when we want flexbox to push the navigation to the right
  • swaps margin-right for margin-left for spacing
  • removes duplicate text-decoration

1.2.1

  • makes navigation wrap on mobile
  • adjusts spacing values to match

1.2.0

  • Removes --medium variants
  • Introduces --very-easy variant
  • Pulls all design variants back one

1.0.0

  • Initial stable release

Assets


File system location: components/vf-navigation

Find an issue on this page? Propose a change or discuss it.