Directory

← Back

vcf-anchor-nav

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

Author

Contributors

Rating

<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

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • @juggle/resize-observer#^3.1.3
  • @polymer/polymer#^3.0.0
  • @vaadin/component-base#^23.0.3
  • @vaadin/tabs#^23.0.3
  • @vaadin/vaadin-lumo-styles#^23.0.3
  • @vaadin/vaadin-themable-mixin#^23.0.3
  • intersection-observer#^0.10.0
  • smoothscroll-polyfill#^0.4.4
  • stickyfilljs#^2.1.0
Released
2022-05-16
Maturity
IMPORTED
License
Other

Compatibility

Framework
Polymer 3.0+
Browser
Browser Independent

vcf-anchor-nav - Vaadin Add-on Directory

Web Component for easily creating layouts with sticky anchor navigation tabs and content sections. vcf-anchor-nav - Vaadin Add-on Directory
# <vcf-anchor-nav> [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![npm version](https://badgen.net/npm/v/@vaadin-component-factory/vcf-anchor-nav)](https://www.npmjs.com/package/@vaadin-component-factory/vcf-anchor-nav) [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadin-component-factoryvcf-anchor-nav) 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 ↗](https://vcf-anchor-nav.netlify.com) | [API documentation ↗](https://vcf-anchor-nav.netlify.com/api/#/elements/Vaadin.VcfAnchorNav) ## Installation Install `vcf-anchor-nav`: ```sh npm i @vaadin-component-factory/vcf-anchor-nav --save ``` ## Usage Once installed, import it in your application: ```js import '@vaadin-component-factory/vcf-anchor-nav'; ``` Add `` element and ``s to the page. ```html

Header

... ... ...
``` ## Running demo 1. Fork the `vcf-anchor-nav` repository and clone it locally. 1. Make sure you have [npm](https://www.npmjs.com/) installed. 1. When in the `vcf-anchor-nav` directory, run `npm install` to install dependencies. 1. 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](https://vaadin.com/directory/component/anchor-nav-for-flow) ## License Apache License 2.0
Online