https://github.com/vaadin-component-factory/vcf-anchor-nav

Web Component for easily creating layouts with sticky anchor navigation tabs and content sections.
https://github.com/vaadin-component-factory/vcf-anchor-nav

javascript polymer vaadin vaadin-component-factory web-component

Last synced: 7 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/vaadin-component-factory/vcf-anchor-nav
• Owner: vaadin-component-factory
• License: apache-2.0
• Created: 2020-05-14T14:33:59.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-06-12T09:22:08.000Z (over 1 year ago)
• Last Synced: 2024-07-20T05:44:39.179Z (3 months ago)
• Topics: javascript, polymer, vaadin, vaadin-component-factory, web-component
• Language: JavaScript
• Homepage:
• Size: 226 KB
• Stars: 2
• Watchers: 8
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# <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