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

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.

Using the vfNavigationOnThisPage JavaScript adds a quality-of-life improvement by automatically activating sections as the user scrolls them into view on the page.

For this feature to work, anchor targets need two things an element id: id="container-1"

These could be added to any item on the page, but would most logically be added to a vf-grid, embl-grid or vf-section-header

Variants

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": [
    {
      "text": "Services",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "text": "Research",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "text": "Training",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "text": "About us",
      "navigation_href": "JavaScript:Void(0);"
    }
  ]
}
 %}
{% 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": [
    {
      "text": "Services",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "text": "Research",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "text": "Training",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "text": "About us",
      "navigation_href": "JavaScript:Void(0);"
    }
  ]
} %}
                
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>
              
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": [
    {
      "text": "Home",
      "navigation_href": "JavaScript:Void(0);",
      "currentPage": "balls"
    },
    {
      "text": "Download",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "text": "Release Notes",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "text": "FAQ",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "text": "Help",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "text": "Licence",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "text": "About",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "text": "Feedback",
      "navigation_href": "JavaScript:Void(0);"
    }
  ]
}
 %}
{% 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": [
    {
      "text": "Home",
      "navigation_href": "JavaScript:Void(0);",
      "currentPage": "balls"
    },
    {
      "text": "Download",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "text": "Release Notes",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "text": "FAQ",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "text": "Help",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "text": "Licence",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "text": "About",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "text": "Feedback",
      "navigation_href": "JavaScript:Void(0);"
    }
  ]
} %}
                
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>
              
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": [
    {
      "text": "Anchor 1",
      "navigation_href": "#container-1"
    },
    {
      "text": "Anchor 2",
      "navigation_href": "#container-2",
      "currentSection": true
    },
    {
      "text": "Anchor 3",
      "navigation_href": "#container-3"
    }
  ]
}
 %}
{% 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": [
    {
      "text": "Anchor 1",
      "navigation_href": "#container-1"
    },
    {
      "text": "Anchor 2",
      "navigation_href": "#container-2",
      "currentSection": true
    },
    {
      "text": "Anchor 3",
      "navigation_href": "#container-3"
    }
  ]
} %}
                
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

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.

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.

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.

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

1.2.0

  • Update node-html-parser to 5.1.0
  • Use eleventy v1.0.0-beta.8
  • https://github.com/visual-framework/vf-core/pull/1257

1.1.16

  • Utilise new vf-navigation--on-this-page.
  • Update project boilerplate links at https://stable.visual-framework.dev/building/

1.1.13

  • Documentation updates
  • New release

1.1.12

  • Update milestones and roadmap.

1.1.11

  • Add ELIXIR banner to example EMBL-EBI page.
  • https://stable.visual-framework.dev/patterns/boilerplate-generic-embl-ebi/
  • https://github.com/visual-framework/vf-core/pull/1615

1.1.7

  • Fixed issue of overlapping menu on VF components site
  • https://github.com/visual-framework/vf-core/issues/1518

1.1.6

  • dependency bump

1.1.2

  • Implements updated vf-search markup.
  • Changes a few pages on how it works with nunjucks and markdown.

1.1.0

  • updates Design Tokens homepage.
  • adds neutral colour tokens
  • adds 'status banners' for components in the documentation page.
  • Adds the form options as their own set of components in the list.
  • https://github.com/visual-framework/vf-core/pull/1390/files
  • Updates to use 11ty 0.12.1
  • https://github.com/visual-framework/vf-core/pull/1435

1.0.24

  • changes the vf-intro so it's a white background, removes the padding.
  • changes the links in vf-intro to be the 'correct' buttons.

1.0.23

  • small change to cards on homepage

1.0.18

  • dependency bump

1.0.17

  • dependency bump

1.0.16

  • dependency bump

1.0.13

  • dependency bump
  • adds roamap and consultation docs

1.0.12

  • design token documenation now lives in the component libary

1.0.7

  • adds updates blog

1.0.6

  • begin to make more pattern/boilerplate guidance
  • minor templating updates

1.0.5

  • dependency bump

1.0.4

  • uses vf-favicon
  • adds meta attributes

1.0.3

  • run vf-component-assets:everything on local dev
  • remove reference to removed /css/app.css

1.0.2

  • Add 404
  • Fix component CSS generation

1.0.1

  • Also generate per-component CSS with vf-css:generate-component-css

1.0.0

  • Initial release to be used with vf-core 2.2.0

Assets



File system location: components/vf-navigation

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