@ec-europa/ecl-navigation-inpages

ECL Inpage Navigation

Stats

StarsIssuesVersionUpdatedCreatedSize
@ec-europa/ecl-navigation-inpages
0.7.04 years ago4 years agoMinified + gzip package size for @ec-europa/ecl-navigation-inpages in KB

Readme

Inpage navigations

Why and how to use this component

Inpage navigation gives the user an overview of page contents.
It provides in-page (or anchor) links to all H2 headings on that page. It helps users to orient themselves on the page and allows them to jump directly to content that is lower on the page, without scrolling first through the rest of the page content. A page with in-page links to content also makes it easier to refer to that specific content when shared.

When to use this component

  • on pages with extensive body text that is clearly structured
  • left column, always at the top of the page
  • note that the page’s first columns are reserved for the in-page navigation

Do not use this component

  • when the content is above the fold (the part of the page visible without scrolling)

Implementation

Inpage navigation relies on expandable component, and two javascript libraries.

Also, following script has to be added to your page:

document.addEventListener('DOMContentLoaded', function() {
  ECL.initExpandables();
  ECL.navigationInpages();
});

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.