Nerfing Powerful Megalomaniacs


    3.0.0-rc.1 • Public • Published

    Navigation component

    npm version


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


    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


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



    npm i @visual-framework/vf-navigation

    DownloadsWeekly Downloads





    Apache 2.0

    Unpacked Size

    50.9 kB

    Total Files


    Last publish


    • khawkins98