Nav Link

The <NavLink> component is used in navigation (ex: in Console). All additional properties are sent directly to the underlying HTML <a> element.

Properties

Name
Default
Description
active
false
If the link is active (boolean)

Slots

Name
Default
default
The default content of the Nav Link.
start
The content of the start slot (left side).
end
The content of the end slot (right side).

Examples

<NavLink href="/" active>Overview</NavLink>
<NavLink href="/">Comments</NavLink>
<NavLink href="/">Pages</NavLink>
<NavLink href="/" disabled>Disabled</NavLink>
Overview Comments Pages Disabled

With Slots

<NavLink href="/" active>
    {#snippet start()}
        <IconColumns />
    {/snippet}
    Overview
</NavLink>

<NavLink href="/">
    {#snippet start()}
        <IconChat />
    {/snippet}
    Comments
</NavLink>

<NavLink href="/">
    {#snippet start()}
        <IconFile />
    {/snippet}
    Pages
</NavLink>

<NavLink href="/">
    {#snippet start()}
        <IconCoin />
    {/snippet}
    Billing
    {#snippet end()}
        <IconExclamationCircle />
    {/snippet}
</NavLink>