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

Basic

<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>

NavLinkGroup

NavLinkGroup provides better animations for a group of NavLink components. It is recommended to use this to wrap same-level navigation links.

<NavLinkGroup>
	<NavLink
		href="javascript:void(0)"
		active={active === 'overview'}
		onclick={() => (active = 'overview')}>Overview</NavLink
	>
	<NavLink
		href="javascript:void(0)"
		active={active === 'comments'}
		onclick={() => (active = 'comments')}>Comments</NavLink
	>

	<Divider margin={10} />

	<NavLink
		href="javascript:void(0)"
		active={active === 'pages'}
		onclick={() => (active = 'pages')}>Pages</NavLink
	>

	<NavLink
		href="javascript:void(0)"
		active={active === 'posts'}
		onclick={() => (active = 'posts')}>Posts</NavLink
	>
</NavLinkGroup>
Overview Comments
Pages Posts