Tab Nav

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

Properties and Slots

TabNav

Properties

Name
Description
active
The name of the active tab.

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

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

<TabNav basePath="/settings">
    <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