Go to foo
Scroll down to see:
  • Tabs sticking to the top
  • Tab of visible section being highlighted
  • Tabs horizontally scrolling when overflowing
Click on a tab to jump to section.
Accessibility has been taken seriously when implementing the component.
  1. Try focusing tabs using keyboard, move focus with arrow keys
  2. Hit ENTER or SPACE to jump to sections
  3. Move focus to this text field by hitting TAB
Headers and tab names are set automatically. You can customize them to your needs.
Section 4 is short.
Section 5 is long.
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>
Section 1
Section 2
Section 3 

<style>
  #fullscreen {
    height: 50vh;
    --anchor-nav-inner-max-width: 1000px;
  }

  #fullscreen[fullscreen] {
    z-index: 2;
  }

  #fullscreen vaadin-button {
    margin: var(--lumo-space-l) var(--lumo-space-m);
  }

  #fullscreen vcf-anchor-nav-section {
    height: 50vh;
    --anchor-nav-section-border-width: 1px;
  }
</style>

<vcf-anchor-nav id="fullscreen" theme="expand-last" disable-preserve-on-refresh no-history>
  <vaadin-button slot="header">Toggle Fullscreen</vaadin-button>
  <vcf-anchor-nav-section>Section 1</vcf-anchor-nav-section>
  <vcf-anchor-nav-section>Section 2</vcf-anchor-nav-section>
  <vcf-anchor-nav-section>Section 3</vcf-anchor-nav-section>
</vcf-anchor-nav>

<script>
  window.addEventListener('WebComponentsReady', () => {
    document.querySelector('#fullscreen vaadin-button').addEventListener('click', () => {
      // Toggle fullscreen
      const anchorNav = document.querySelector('#fullscreen');
      anchorNav.fullscreen = !anchorNav.fullscreen;
      // Get closest offset parent
      let parent = anchorNav;
      let offsetParent = null;
      while ((offsetParent = parent.offsetParent) === null) {
        if (parent.parentElement) parent = parent.parentElement;
        else break;
      }
      // Removes double scrollbars
      if (anchorNav.fullscreen) {
        offsetParent.scrollTop = 0;
        offsetParent.style.overflow = 'hidden';
      } else {
        offsetParent.style.removeProperty('overflow');
      }
    });
  });
</script>
Custom Tab 3
Custom Tab 4
Custom Tab 1
Section 1 content.
Custom Tab 2
Section 2 content.
Section 3 content.
Section 4 content. 

<style>
  #custom-tabs {
    height: 50vh;
  }

  #custom-tabs vcf-anchor-nav-section {
    height: 50vh;
  }

  #custom-tabs vcf-anchor-nav-section:last-of-type {
    height: calc(50vh - var(--_tab-height));
  }

  .vertical-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>

<vcf-anchor-nav id="custom-tabs" theme="expand-last" disable-preserve-on-refresh no-history>
  <!-- Add your own <vaadin-tabs> to the "tabs" slot. -->
  <vaadin-tabs slot="tabs">
    <!-- Create custom <vaadin-tab> with "id" equal to "tab-id" of the linked section. -->
    <vaadin-tab id="custom-tab-3">
      <div class="vertical-tab">
        <iron-icon icon="lumo:chevron-up"></iron-icon>
        Custom Tab 3
      </div>
    </vaadin-tab>
    <vaadin-tab id="custom-tab-4">
      <div class="vertical-tab">
        Custom Tab 4
        <iron-icon icon="lumo:chevron-down"></iron-icon>
      </div>
    </vaadin-tab>
  </vaadin-tabs>

  <vcf-anchor-nav-section>
    <!-- Create custom tabs using the "tab" slot of the section. -->
    <vaadin-tab slot="tab">
      Custom Tab 1
      <iron-icon icon="lumo:chevron-right"></iron-icon>
    </vaadin-tab>
    Section 1 content.
  </vcf-anchor-nav-section>
  <vcf-anchor-nav-section>
    <vaadin-tab slot="tab">
      <iron-icon icon="lumo:chevron-left"></iron-icon>
      Custom Tab 2
    </vaadin-tab>
    Section 2 content.
  </vcf-anchor-nav-section>
  <!-- Use the "tab-id" attribute to link sections with a tab in the slotted tabs element. -->
  <vcf-anchor-nav-section tab-id="custom-tab-3">
    Section 3 content.
  </vcf-anchor-nav-section>
  <vcf-anchor-nav-section tab-id="custom-tab-4">
    Section 4 content.
  </vcf-anchor-nav-section>
</vcf-anchor-nav>