<vcf-anchor-nav>
![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)
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](https://user-images.githubusercontent.com/3392815/86610834-8be1b700-bfb6-11ea-8009-59fe01c75c28.gif)
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
-
Fork the vcf-anchor-nav
repository and clone it locally.
-
Make sure you have npm installed.
-
When in the vcf-anchor-nav
directory, run npm install
to install dependencies.
-
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