Web Component for easily creating layouts with sticky anchor navigation tabs and content sections.

<vcf-anchor-nav>

Gitter npm version Published on Vaadin Directory

Web Component for easily creating layouts with sticky anchor navigation tabs and content sections.

  • Automates the linking of tabs and sections.
  • Smooth scrolls to section on tab click and sets the URL hash.
  • Scrolls to URL hash on load (preserve selected tab on refresh).

GIF for Vaadin Component Factory anchor nav

Live demo ↗ | API documentation ↗

Installation

Install vcf-anchor-nav:

npm i @vaadin-component-factory/vcf-anchor-nav --save

Usage

Once installed, import it in your application:

import '@vaadin-component-factory/vcf-anchor-nav';

Add <vcf-anchor-nav> element and <vcf-anchor-nav-section>s to the page.

<vcf-anchor-nav>
  <h1 slot="header">Header</h1>
  <vcf-anchor-nav-section name="One"> ... </vcf-anchor-nav-section>
  <vcf-anchor-nav-section name="Two"> ... </vcf-anchor-nav-section>
  <vcf-anchor-nav-section name="Three"> ... </vcf-anchor-nav-section>
</vcf-anchor-nav>

Running demo

  1. Fork the vcf-anchor-nav repository and clone it locally.

  2. Make sure you have npm installed.

  3. When in the vcf-anchor-nav directory, run npm install to install dependencies.

  4. Run npm start to open the demo.

Server-side API

This is the client-side (Polymer 3) web component. If you are looking for the server-side (Java) API for the Vaadin Platform, it can be found here: Anchor Nav

License

Apache License 2.0

Install

Link to this version
ImportedReleased 29 June 2021Other
Framework Support
Polymer 3.0+
Browser Independent
Install with
npm install @vaadin-component-factory/vcf-anchor-nav"@1.2.10"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.2.10

Dependencies

  • @juggle/resize-observer#^3.1.3
  • @polymer/polymer#^3.0.0
  • @vaadin/vaadin-element-mixin#^2.1.3
  • @vaadin/vaadin-lumo-styles#^1.5.0
  • @vaadin/vaadin-tabs#^3.0.5
  • @vaadin/vaadin-themable-mixin#^1.5.1
  • intersection-observer#^0.10.0
  • smoothscroll-polyfill#^0.4.4
  • stickyfilljs#^2.1.0