Tabs - Multi Page

Tabs can be used to both navigate routes, or as a standard component on a single page.

See Page 2 for an example of the single-page tabs.

Basic usage:

<script lang="ts">
    import { page } from '$app/state';
    import { base } from '$app/paths';
    import { UI } from '@bojit/svelte-components';

    let { children } = $props();
</script>

<UI.Tabs
    basePath={`${base}/path/to/layout/`}
    currentPath={page.route.id}
    tabs={[
        {
            label: 'Page 1',
            link: 'page_1'
        },
        {
            label: 'Page 2',
            link: 'page_2'
        }
    ]}
/>
{@render children?.()}

Typically tabs are placed on a +layout.svelte route and are used to forward to sub-pages

We can nest tabs within tabs too. This is handled by setting each tab component with a different base path