Skip to content

🎹 Tab menu component that uses page as a state

License

Notifications You must be signed in to change notification settings

jill64/svelte-page-tab

Repository files navigation

svelte-page-tab

npm-version npm-license npm-download-month npm-min-size ci.yml website

🎹 Tab menu component that uses page as a state

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