EMBL-EBI Header and Footer utility

Support for using the EMBL-EBI header and footer in projects that use the Visual Framework 2.0.

Upgrade recommended: If you are using an earlier version of this component, upgrade to v2.1.4 or later. Previous versions loaded header and footer HTML from the EMBL ContentHub and depended on the legacy EBI-Framework/v1.x/script.js file. Both of those external dependencies have been removed as of v2.1.4.

github location npm version

Usage

This component provides the minimum amount of legacy CSS to make the header and footer work while avoiding conflicts with VF 2.0 styles.

  • This requires VF 2.0 footer CSS and other styles.
  • If you do not currently have VF 2.0 CSS and JS as part of your project, you can use the CDN JS.
  • The EMBL contentHub loader is no longer required as of v2.1.4.
  • The legacy script.js file from EBI-Framework v1.x is no longer required as of v2.1.4.
  • The data protection banner is bundled inside the component JS. To disable the built-in VF 1.x cookie banner include an element with data-protection-message-disable="true".
    • This is inserted automatically when using the ebi-header-footer--footer template.

Variants

Default variant

There is no default. Use the variant templates to load the portions you need.
HTML 
There is no default. Use the variant templates to load the portions you need.

Footer variant

HTML 
<!-- embl-ebi global footer -->
<footer class="vf-footer" data-vf-google-analytics-region="embl-footer">
  <div class="vf-footer__inner">
    <p class="vf-footer__notice">
      <a class="vf-footer__link" href="//www.ebi.ac.uk/about/our-impact">
        EMBL-EBI is the home for big data in biology.</a>
    </p>
    <p class="vf-footer__notice">
      We help scientists exploit complex information to make discoveries that benefit humankind.
    </p>
    <div class="vf-footer__links-group | vf-grid">
      <div class="vf-links">
        <h4 class="vf-links__heading">
          <a class="vf-heading__link" href="//www.ebi.ac.uk/services">Services</a>
        </h4>
        <ul class="vf-links__list | vf-list">
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/services/data-resources-and-tools" class="vf-list__link">Data resources and tools</a>
          </li>
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/submission" class="vf-list__link">Data submission</a>
          </li>
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/support" class="vf-list__link">Support and feedback</a>
          </li>
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/licencing" class="vf-list__link">Licensing</a>
          </li>
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/long-term-data-preservation" class="vf-list__link">Long-term data preservation</a>
          </li>
        </ul>
      </div>

      <div class="vf-links">
        <h4 class="vf-links__heading">
          <a class="vf-heading__link" href="//www.ebi.ac.uk/research">Research</a>
        </h4>
        <ul class="vf-links__list | vf-list">
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/research/publications" class="vf-list__link">Publications</a>
          </li>
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/research/groups" class="vf-list__link">Research groups</a>
          </li>
          <li class="vf-list__item vf-footer__notice">
            <a href="//www.ebi.ac.uk/research/postdocs" class="vf-list__link">Postdocs</a>
            and
            <a href="//www.ebi.ac.uk/research/eipp" class="vf-list__link">PhDs</a>
          </li>
        </ul>
      </div>

      <div class="vf-links">
        <h4 class="vf-links__heading">
          <a class="vf-heading__link" href="//www.ebi.ac.uk/training">Training</a>
        </h4>
        <ul class="vf-links__list | vf-list">
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/training/live-events" class="vf-list__link">Live training</a>
          </li>
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/training/on-demand" class="vf-list__link">On-demand training</a>
          </li>
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/training/trainer-support" class="vf-list__link">Support for trainers</a>
          </li>
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/training/contact-us" class="vf-list__link">Contact organisers</a>
          </li>
        </ul>
      </div>

      <div class="vf-links">
        <h4 class="vf-links__heading">
          <a class="vf-heading__link" href="//www.ebi.ac.uk/industry">Industry</a>
        </h4>
        <ul class="vf-links__list | vf-list">
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/industry/private/members-area/" class="vf-list__link">Members Area</a>
          </li>
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/industry/contact-us" class="vf-list__link">Contact Industry team</a>
          </li>
        </ul>
      </div>

      <div class="vf-links">
        <h4 class="vf-links__heading">
          <a class="vf-heading__link" href="//www.ebi.ac.uk/about">About</a>
        </h4>
        <ul class="vf-links__list | vf-list">
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/about/faq" class="vf-list__link">FAQ</a>
          </li>
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/about/contact" class="vf-list__link">Contact us</a>
          </li>
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/about/events" class="vf-list__link">Events</a>
          </li>
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/about/jobs" class="vf-list__link">Jobs</a>
          </li>
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/about/news" class="vf-list__link">News</a>
          </li>
          <li class="vf-list__item">
            <a href="//www.ebi.ac.uk/about/people" class="vf-list__link">People and groups</a>
          </li>
          <li class="vf-list__item">
            <a href="//intranet.ebi.ac.uk" class="vf-list__link">Intranet for staff</a>
          </li>
        </ul>
      </div>
    </div>

    <p class="vf-footer__legal">
      <span class="vf-footer__legal-text">
        <a class="vf-footer__link" href="https://www.google.co.uk/maps/place/Hinxton,+Saffron+Walden+CB10+1SD/@52.0815334,0.1891518,17z/data=!3m1!4b1!4m5!3m4!1s0x47d87ccbfbd2538b:0x7bbdb4cde2779ff3!8m2!3d52.0800838!4d0.186415">EMBL-EBI, Wellcome Genome Campus, Hinxton, Cambridgeshire, CB10 1SD, UK.</a>
      </span>
      <span class="vf-footer__legal-text">
        <a class="vf-footer__link" href="tel:00441223494444">Tel: +44 (0)1223 49 44 44</a>
      </span>
      <span class="vf-footer__legal-text">
        <a class="vf-footer__link" href="//www.ebi.ac.uk/about/contact">Full contact details</a>
      </span>
    </p>
    <p class="vf-footer__legal">
      <span class="vf-footer__legal-text">
        Copyright © EMBL 2026
      </span>
      <span class="vf-footer__legal-text">
        EMBL-EBI is part of the
        <a class="vf-footer__link" href="//www.embl.org">European Molecular Biology Laboratory</a>
      </span>
      <span class="vf-footer__legal-text">
        <a class="vf-footer__link" href="//www.ebi.ac.uk/about/terms-of-use">Terms of use</a>
      </span>
    </p>

  </div>
</footer>

<!--
  When using legacy EBI 1.x JS, we disable the old cookie banner.
  https://stable.visual-framework.dev/components/ebi-header-footer/
  -->
<div class="vf-u-display-none" data-protection-message-disable="true"></div>

Header variant

HTML 
<!-- Tell the VF 1.4 not to display a data protection banner. -->
<!-- You should use the 2.0 data protection banner from the contentHub. -->
<span data-protection-message-disable="true"></span>
<!-- embl-ebi global header -->
<header id="masthead-black-bar" class="clearfix masthead-black-bar | ebi-header-footer vf-content vf-u-fullbleed">
  <div></div>
  <div>
    <nav id="search-bar" class="search-bar global-masthead-interactive-banner">
      <div class="row padding-bottom-medium">
        <div class="columns padding-top-medium">
          <button class="close-button" aria-label="Close alert" type="button">
            <span aria-hidden="true">x</span>
          </button>
        </div>
      </div>
      <div class="row">
        <form id="global-search" name="global-search" action="/ebisearch/search.ebi" method="GET" class="">
          <div>
            <div class="input-group">
              <label class="vf-form__label vf-u-sr-only" for="global-searchbox">Search all of EMBL-EBI</label>
              <input type="text" name="query" id="global-searchbox" class="input-group-field" placeholder="Search all of EMBL-EBI">
              <div class="input-group-button">
                <input type="submit" name="submit" value="Search" class="button">
                <input type="hidden" name="db" value="allebi" checked="checked">
                <input type="hidden" name="requestFrom" value="masthead-black-bar" checked="checked">
              </div>
            </div>
          </div>
        </form>
      </div>
    </nav>
  </div>
  <div>
    <nav class="row">
      <ul id="global-nav" class="menu global-nav text-right" data-vf-google-analytics-region="Black bar">
        <li class="float-right show-for-medium embl-selector embl-ebi">
          <a class="button float-right custom-ebi-logo-bg custom-ebi-logo-bg-transparent-text" style="color: transparent;" href="https://www.ebi.ac.uk">EMBL-EBI</a>
        </li>
        <li class="float-right search">
          <a href="#" class="inline-block collpased float-left search-toggle">
            <span class="show-for-small-only">Search</span>
          </a>
        </li>
        <li class="what about">
          <a href="https://www.ebi.ac.uk/about">About us</a>
        </li>
        <li class="what training">
          <a href="https://www.ebi.ac.uk/training">Training</a>
        </li>
        <li class="what research">
          <a href="https://www.ebi.ac.uk/research">Research</a>
        </li>
        <li class="what services">
          <a href="https://www.ebi.ac.uk/services">Services</a>
        </li>
        <li class="where ebi">
          <a href="https://www.ebi.ac.uk">EMBL-EBI home</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Examples

Installation info

This repository is distributed with npm. After installing npm, you can install ebi-header-footer with this command.

$ yarn add --dev @visual-framework/ebi-header-footer

Sass/CSS

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/ebi-header-footer/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Changelog

Changelog

2.1.4

  • Optimised the component by removing dependency of old header (with VF 1.4) and footer loading from contenthub. Tracking issue

2.1.3

  • Resolve accessbility issues for EBI blackbar header for v1.4 and also fixes overlapping x button for search box.

2.1.2

  • Resolve a vf-stack + vf-content-hub + legacy black bar edge case.

2.1.1

  • No space between EBI black bar and a hero.
  • https://github.com/visual-framework/vf-core/pull/1724

2.1.0

  • Fix readme for proper display in component library docs.
  • For ebi-header-footer--footer.njk add context disable_ebi_1x_cookie_banner to disable EBI 1.x cookie banner (defaults to true).

2.0.3

  • Directly load CSS for global header to prevent flashes of non-styled elements.

2.0.2

  • changes any set- style functions to cleaner version

2.0.1

  • Use VF 1.4 JS to load the HTML for the global header.
  • Add documentation and example on disabling the 1.4 data protection banner, as you should use the 2.0 data protection banner from the contentHub.

2.0.0

  • Adds distinct footer, header templates as the header currently has more legacy dependencies.
  • Uses the new 2.0 look and feel footer.
  • Uses contentHub to load templates.
  • Ensure black bar does not have a margin at the top due to vf-stack.
  • https://github.com/visual-framework/vf-core/pull/1316

1.0.1

  • Adds webkit-appearance: none; as needed for Safari browsers as autoprefixer is not doing this.

1.0.0

  • EBI Header is once again fullbleed after changes in vf-grid-page 2.0.0.

1.0.0-beta.2

  • Resolves changes in other VF components, spacing, links, etc.

Assets


File system location: components/ebi-header-footer

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