svelte-page-tab

🎹 Tab menu component that uses page as a state

Demo

Installation

npm i svelte-page-tab

Usage

<script>
  import { TabItems } from 'svelte-page-tab'
</script>

<ul>
  <TabItems
    prefix={/* path prefix (optional) */}
    routes={new Map([
      // [path, label]
      ['/', 'Top'],
      ['/page1', 'Page 1'],
      ['/page2', 'Page 2'],
      ['/page3', 'Page 3']
    ])}
  />
</ul>

<style>
  ul {
    /* list styles */
  }
  ul :global(li) {
    /* list item styles */
  }
  ul :global(a) {
    /* list item link styles */
  }
  ul :global(a[data-current-location]) {
    /* list item link (current location) styles */
  }
</style>

License

MIT