Tab Nav

To create a tab navigation, use the <TabNav> and <TabNavItem> components.

Properties and Slots

TabNav

Properties

Name
Description
basePath
The base URL path. When set, tabs become active based on the current URL instead of the active prop on TabNavItem.
pathname
The current URL pathname (optional), e.g. page.url.pathname from $app/state. Only used with basePath. Falls back to window.location.pathname when not passed - pass it in SvelteKit apps for a correctly server-rendered active tab.
goto
SvelteKit's goto function (optional), e.g. from $app/navigation. Only used with basePath. Enables client-side navigation - falls back to a normal navigation when not passed.
replaceState
Whether to replace the current history entry when navigating, instead of pushing a new one. Only used with basePath and goto.

Slots

Name
Description
default
The content of the tab nav.

TabNavItem

Properties

Name
Description
name
The name of the tab.
active
Set to true to make the tab active (optional). Only use if you want to control the active tab from outside.

Slots

Name
Description
default
The content of the tab.
start
The content of the start slot (left side).
end
The content of the end slot (right side).

Usage with URLs

TabNav does not depend on SvelteKit, so it also works in non-SvelteKit Svelte apps. In a SvelteKit app, pass pathname and goto so that the active tab is rendered correctly on the server and tab clicks navigate client-side without a full page reload. If they are not passed, a normal (full-page) navigation is used instead.

<script lang="ts">
    import { TabNav, TabNavItem } from '@hyvor/design';
    import { page } from '$app/state';
    import { goto } from '$app/navigation';
</script>

<TabNav basePath="/settings" pathname={page.url.pathname} {goto}>
    <TabNavItem name="settings" index>
        {#snippet start()}
            <IconGear />
        {/snippet}
        Settings
    </TabNavItem>
    <TabNavItem name="seo">
        {#snippet start()}
            <IconSearchHeart />
        {/snippet}
        SEO
        {#snippet end()}
            <Tag size="x-small" color="green">80%</Tag>
        {/snippet}
    </TabNavItem>
    <TabNavItem name="links">
        {#snippet start()}
            <IconLink45deg />
        {/snippet}
        Links
    </TabNavItem>
</TabNav>

Manual usage

<script lang="ts">
    import { TabNav, TabNavItem } from '@hyvor/design';
    let active = 'settings';
</script>

<TabNav>
    <TabNavItem name="settings" active={active === 'settings'} onclick={() => active = 'settings'}>
        {#snippet start()}
            <IconGear />
        {/snippet}
        Settings
    </TabNavItem>
    <TabNavItem name="seo" active={active === 'seo'} onclick={() => active = 'seo'}>
        {#snippet start()}
            <IconSearchHeart />
        {/snippet}
        SEO
        {#snippet end()}
            <Tag size="x-small" color="green">80%</Tag>
        {/snippet}
    </TabNavItem>
    <TabNavItem name="links" active={active === 'links'} onclick={() => active = 'links'}>
        {#snippet start()}
            <IconLink45deg />
        {/snippet}
        Links
    </TabNavItem>
</TabNav>

Active tab is settings

HYVOR Logo