Main Header
- Tabs sticking to the top
- Tab of visible section being highlighted
- Tabs horizontally scrolling when overflowing
- Try focusing tabs using keyboard, move focus with arrow keys
- Hit ENTER or SPACE to jump to sections
- Move focus to this text field by hitting TAB
Custom Header
Headers and tab names are set automatically. You can customize them to your needs.Main Header
Introduction
Scroll down to see:
- Tabs sticking to the top
- Tab of visible section being highlighted
- Tabs horizontally scrolling when overflowing
Accessibility
Accessibility has been taken seriously when implementing the component.
- Try focusing tabs using keyboard, move focus with arrow keys
- Hit ENTER or SPACE to jump to sections
- Move focus to this text field by hitting TAB
Custom Header
Headers and tab names are set automatically. You can customize them to your needs.
Section 4
Section 4 is short.
Section 5
Section 5 is long.
Section 6
Section 6 content.
<style>
#basic {
height: 50vh;
}
#basic vcf-anchor-nav-section:not(:last-of-type) {
height: 50vh;
}
#basic vcf-anchor-nav-section:nth-child(even) {
background-color: var(--lumo-contrast-5pct);
}
</style>
<vcf-anchor-nav id="basic" theme="expand-last" disable-preserve-on-refresh no-history>
<h1 slot="header">Main Header</h1>
<vcf-anchor-nav-section name="Introduction">
Scroll down to see:
<ul>
<li>Tabs sticking to the top</li>
<li>Tab of visible section being highlighted</li>
<li>Tabs horizontally scrolling when overflowing</li>
</ul>
Click on a tab to jump to section.
</vcf-anchor-nav-section>
<vcf-anchor-nav-section name="Accessibility">
Accessibility has been taken seriously when implementing the component.
<ol>
<li>Try focusing tabs using keyboard, move focus with arrow keys</li>
<li>Hit ENTER or SPACE to jump to sections</li>
<li>Move focus to this text field by hitting TAB</li>
</ol>
<vaadin-text-field></vaadin-text-field>
</vcf-anchor-nav-section>
<vcf-anchor-nav-section name="Custom Tab Name">
<h1 slot="header">Custom Header</h1>
Headers and tab names are set automatically. You can customize them to your needs.
</vcf-anchor-nav-section>
<vcf-anchor-nav-section style="height: 20vh;">
Section 4 is short.
<vaadin-text-field></vaadin-text-field>
</vcf-anchor-nav-section>
<vcf-anchor-nav-section style="height: 120vh;">
Section 5 is long.
<vaadin-text-field></vaadin-text-field>
</vcf-anchor-nav-section>
<vcf-anchor-nav-section>Section 6 content.</vcf-anchor-nav-section>
</vcf-anchor-nav>