Local components

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

Using `include`


{% 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

Using `include`


{% 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

Home

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.

Another item

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

1.2.3

Fix issue loading scripts and styles for latest site

1.2.2

Documentation upgrade

1.2.1

New release

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

Navigation block

Usage

Global navigation variant

Main navigation variant

On this page navigation variant

Variants

Using include

Using render

Using include

Using render

Using include

Using render

Examples

Sass/CSS

JavaScript

Changelog

1.2.3

1.2.2

1.2.1

1.2.0

1.1.16

1.1.13

1.1.12

1.1.11

1.1.7

1.1.6

1.1.2

1.1.0

1.0.24

1.0.23

1.0.18

1.0.17

1.0.16

1.0.13

1.0.12

1.0.7

1.0.6

1.0.5

1.0.4

1.0.3

1.0.2

1.0.1

1.0.0

Assets

Using `include`

Using `render`

Using `include`

Using `render`

Using `include`

Using `render`