Navigation Component

About

Install

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.

File system location: components/vf-navigation

Variants

Variant: Default live block

Nunjucks demo

{% render '@vf-navigation--default', {
  "component-type": "block",
  "navigation": [
    {
      "text": "Home",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "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);"
    }
  ]
} %}

Sample output

Sample output as HTML

<nav class="vf-navigation">
  <ul class="vf-navigation__list | vf-list--inline">
    <li class="vf-navigation__item">
      <a href="JavaScript:Void(0);" class="vf-navigation__link">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>

Assets

Nunjucks template

Variant: Global live block

Nunjucks demo

{% render '@vf-navigation--global', {
  "component-type": "block",
  "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);"
    }
  ],
  "classModifier": "global"
} %}

Sample output

Sample output as HTML

<nav class="vf-navigation vf-navigation--global">
  <ul class="vf-navigation__list | vf-list--inline">
    <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>

Assets

Nunjucks template

Variant: Main live block

Nunjucks demo

{% render '@vf-navigation--main', {
  "component-type": "block",
  "navigation": [
    {
      "text": "Home",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "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);"
    }
  ],
  "classModifier": "main"
} %}

Sample output

Sample output as HTML

<nav class="vf-navigation vf-navigation--main">
  <ul class="vf-navigation__list | vf-list--inline">
    <li class="vf-navigation__item">
      <a href="JavaScript:Void(0);" class="vf-navigation__link">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>

Assets

Nunjucks template

Variant: Main Very Easy live block

Nunjucks demo

{% render '@vf-navigation--main-very-easy', {
  "component-type": "block",
  "navigation": [
    {
      "text": "Home",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "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);"
    }
  ],
  "classModifier": "main",
  "global_layout": "very-easy"
} %}

Sample output

Sample output as HTML

 <div class="vf-global-layout--very-easy">
   <nav class="vf-navigation vf-navigation--main">
     <ul class="vf-navigation__list | vf-list--inline">
       <li class="vf-navigation__item">
         <a href="JavaScript:Void(0);" class="vf-navigation__link">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>
 </div>

Assets

Nunjucks template

Variant: Main Easy live block

Nunjucks demo

{% render '@vf-navigation--main-easy', {
  "component-type": "block",
  "navigation": [
    {
      "text": "Home",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "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);"
    }
  ],
  "classModifier": "main",
  "global_layout": "easy"
} %}

Sample output

Sample output as HTML

 <div class="vf-global-layout--easy">
   <nav class="vf-navigation vf-navigation--main">
     <ul class="vf-navigation__list | vf-list--inline">
       <li class="vf-navigation__item">
         <a href="JavaScript:Void(0);" class="vf-navigation__link">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>
 </div>

Assets

Nunjucks template

Variant: Main Normal live block

Nunjucks demo

{% render '@vf-navigation--main-normal', {
  "component-type": "block",
  "navigation": [
    {
      "text": "Home",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "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);"
    }
  ],
  "classModifier": "main",
  "global_layout": "normal"
} %}

Sample output

Sample output as HTML

 <div class="vf-global-layout--normal">
   <nav class="vf-navigation vf-navigation--main">
     <ul class="vf-navigation__list | vf-list--inline">
       <li class="vf-navigation__item">
         <a href="JavaScript:Void(0);" class="vf-navigation__link">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>
 </div>

Assets

Nunjucks template

Variant: Main Hard live block

Nunjucks demo

{% render '@vf-navigation--main-hard', {
  "component-type": "block",
  "navigation": [
    {
      "text": "Home",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "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);"
    }
  ],
  "classModifier": "main",
  "global_layout": "hard",
  "global_theme": "primary"
} %}

Sample output

Sample output as HTML

 <div class="vf-global-layout--hard vf-global-theme--primary">
   <nav class="vf-navigation vf-navigation--main">
     <ul class="vf-navigation__list | vf-list--inline">
       <li class="vf-navigation__item">
         <a href="JavaScript:Void(0);" class="vf-navigation__link">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>
 </div>

Assets

Nunjucks template

Variant: Main Extreme live block

Nunjucks demo

{% render '@vf-navigation--main-extreme', {
  "component-type": "block",
  "navigation": [
    {
      "text": "Home",
      "navigation_href": "JavaScript:Void(0);"
    },
    {
      "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);"
    }
  ],
  "classModifier": "main",
  "global_layout": "extreme"
} %}

Sample output

Sample output as HTML

 <div class="vf-global-layout--extreme">
   <nav class="vf-navigation vf-navigation--main">
     <ul class="vf-navigation__list | vf-list--inline">
       <li class="vf-navigation__item">
         <a href="JavaScript:Void(0);" class="vf-navigation__link">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>
 </div>

Assets

Nunjucks template

Variant: Additional live block

Nunjucks demo

{% render '@vf-navigation--additional', {
  "component-type": "block",
  "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);"
    }
  ],
  "heading": "European Bioinformatics Institute",
  "classModifier": "additional",
  "title": "European Bioinformatics Institute"
} %}

Sample output

Sample output as HTML

<nav class="vf-navigation vf-navigation--additional">
  <h3 class="vf-navigation__heading">European Bioinformatics Institute</h3>
  <ul class="vf-navigation__list | vf-list--inline">
    <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>

Assets

Nunjucks template

All components in this design system

Visual Framework Componet Rollup vf-componenet-rollup
Vf Core Components vf-core-components
vf-local-overrides vf-local-overrides
Visual Framework Sample Component vf-sample

This page is part of the components section.