← Back

Anchor Nav for Flow

Organizes content sections with tabs and provides anchor navigation while linking the tabs and sections

Author

Rating

Popularity

100+

Live Demo ↗

<vcf-anchor-nav> component organizes content sections with tabs and provides anchor navigation while linking the tabs and sections

Basic Usage

AnchorNav anchorNav = new AnchorNav();
anchorNav.setHeight("400px");
anchorNav.addSection(new Span("Section 1"));
anchorNav.addSection(new Span("Section 2"));

Important information about versioning

Component versions 23.x were deprecated in order to follow Semanting Versioning practices. Please use latest version 2.x for Vaadin 23+ and version 3.x for Vaadin 24.5.

Compatibility

Version 1.x.x -> Vaadin 14+
Version 2.x.x -> Vaadin 23+
Version 3.x.x -> Vaadin 24.5.x (improved accessibility)

Development instructions

Starting the test/demo server:

Run mvn jetty:run.
Open http://localhost:8080 in the browser.

Sample code

AnchorNav anchorNav = new AnchorNav();
anchorNav.setHeight("400px");
anchorNav.addSection(new Span("Section 1"));
anchorNav.addSection(new Span("Section 2"));

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

Component version compatible with Vaadin 23

Released: 2024-11-06
Maturity: EXPERIMENTAL
License: Apache License 2.0

Compatibility

Framework: Vaadin 23+; Vaadin 14+ in 1.0.0; Vaadin 24 in 3.0.0
Browser: N/A

Anchor Nav for Flow - Vaadin Add-on Directory

Organizes content sections with tabs and provides anchor navigation while linking the tabs and sections

[Live Demo ↗](https://incubator.app.fi/anchor-nav-demo/anchor-nav) [<vcf-anchor-nav>](https://www.npmjs.com/package/@vaadin-component-factory/vcf-anchor-nav) component organizes content sections with tabs and provides anchor navigation while linking the tabs and sections ## Basic Usage ```java AnchorNav anchorNav = new AnchorNav(); anchorNav.setHeight("400px"); anchorNav.addSection(new Span("Section 1")); anchorNav.addSection(new Span("Section 2")); ``` ## Important information about versioning **Component versions 23.x were deprecated in order to follow Semanting Versioning practices. Please use latest version 2.x for Vaadin 23+ and version 3.x for Vaadin 24.5.** ### Compatibility - Version 1.x.x -> Vaadin 14+ - Version 2.x.x -> Vaadin 23+ - Version 3.x.x -> Vaadin 24.5.x (improved accessibility) ## Development instructions Starting the test/demo server: 1. Run `mvn jetty:run`. 2. Open http://localhost:8080 in the browser. ## Sponsored development Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: [Support](https://vaadin.com/support) and [Pricing](https://vaadin.com/pricing)

Online Demo
View on GitHub

Anchor Nav for Flow version 1.0.0
v 1.0.0: Initial release: Initial component API

Anchor Nav for Flow version 1.0.1
- Added `expand-last` theme variant - Upgraded web component version

Anchor Nav for Flow version 1.0.2
Fixes vcf-anchor-nav devision by zero issue [#3](https://github.com/vaadin-component-factory/vcf-anchor-nav/issues/3)

Anchor Nav for Flow version 1.0.3
Update license to Apache 2.0

Anchor Nav for Flow version 1.0.4
Upgraded webcomponent version

Anchor Nav for Flow version 1.0.5
Listening to section selection changes, and added API for selecting a section

Anchor Nav for Flow version 1.0.6
Upgraded web component version

Anchor Nav for Flow version 1.1.0
Add component in tab and fixes regressions

Anchor Nav for Flow version 1.1.1
Bump the version of the webcomponent: * Added section-focus event: fired when a vcf-anchor-nav-section receives focus * Added nav and section focus listeners to manage section tabindex * Fixed initial scrollTo behavior * Added reset expand-last-height on resize

Anchor Nav for Flow version 1.1.2
Fix ResizeObserver loop completed with undelivered notifications. [Issue #4](https://github.com/vaadin-component-factory/anchor-nav/issues/4)

Anchor Nav for Flow version 1.1.3
expand-last doesn't work properly on component resize.

Anchor Nav for Flow version 3.0.0
#### New features: * New version supporting Vaadin 24.5 * Web component contain accessibility updates (tabs and header in sections are part of the light dom) ([See details](https://github.com/vaadin-component-factory/anchor-nav/pull/13))

Anchor Nav for Flow version 2.0.0
Component version compatible with Vaadin 23

Directory