← 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"));

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

Added a "noHistory" property to disable browser history within a view.

Released: 2023-06-13
Maturity: EXPERIMENTAL
License: Apache License 2.0

Compatibility

Framework: Vaadin 23+; Vaadin 14+ in 1.0.0
Browser: Browser Independent

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")); ``` ## 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)

Directory