Visual Framework
Visual Framework
The vf-navigation component is a horizontal list of links to key pages of the website.
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.
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.
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.
vf-navigation--on-this-page on a page.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.data-vf-js-navigation-on-this-page-container="true" is present on .vf-navigation__list.data-vf-js-navigation-on-this-page-link.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.
includeYou'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" %}
renderThis 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);"
}
]
} %}
<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>
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.
includeYou'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" %}
renderThis 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);"
}
]
} %}
<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>
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.
includeYou'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" %}
renderThis 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"
}
]
} %}
<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>
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
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
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();
data-vf-js-navigation-on-this-page-link for vf-navigation--on-this-pagedata-vf-js-navigation-on-this-page-link.vf-navigation component was getting overlapped by other components.vf-navigation--on-this-page.vf-navigation--additional.--additional variant.--main and --global Sass files, incorporating them into the base stylesheet.vf-cluster for layout in the markup.set- style functions to cleaner version--main.--main.--main because sometimes it's out of the vf-stack flow.--additional variant.njk/yml variable look up to determine classnames to use:vf-cluster only to --main variant.--additional CSS for full bleed background with vf-u-fullbleed class.--main.--main.vf-cluster to the component for responsive layoutaria-current="page" rule and CSS to denote the current page.:hover to links.margin-left: auto for when we want flexbox to push the navigation to the rightmargin-right for margin-left for spacingtext-decoration--medium variants--very-easy variant
File system location: components/vf-navigation
Find an issue on this page? Propose a change or discuss it.