Components

NavLink

A versatile navigation link component used within layouts to route between pages. Ideal when navigation is needed without the visual weight of a button. Use only for routing, not for triggering actions.

Component

View code

Show playground

Link text

Props

Props	Default	Type
`text`	`Link text`	`string`
`size`	`NavLinkSize.SM`	`NavLinkSize`
`icon`	`mdi:arrow-right-thin`	`string`
`iconPosition`	`IconPosition.NONE`	`IconPosition`
`disabled`	`false`	`boolean`
`to`	`/`	`string`
`isExternal`	`false`	`boolean`
`textClass`	`font-semibold`	`string`

Usage

text

Sets the text of the link.

 <template>
    <NavLink 
        text="Link text"
    />
</template>

Type: string
Default: 'Link text'

size

Sets the size of the link. Uses the NavLinkSize enum.

 <template>
    <NavLink 
        :size="NavLinkSize.LG"
    />
</template>

Type: NavLinkSize
Default: NavLinkSize.SM

Options

Value	Description
`XXL`	Extra extra large size.
`XL`	Extra large size.
`LG`	Large size.
`MD`	Medium size.
`SM`	Small size.
`XS`	Extra small size.

icon

Sets the icon of the link.

 <template>
    <NavLink 
        icon="mdi:arrow-right-thin"
    />
</template>

Type: string
Default: 'mdi:arrow-right-thin'

iconPosition

Sets the position of the icon. Uses the IconPosition enum.

 <template>
    <NavLink 
        :iconPosition="IconPosition.LEFT"
    />
</template>

Type: IconPosition
Default: IconPosition.NONE

Options

Value	Description
`NONE`	No icon.
`LEFT`	Icon on the left side of the text.
`RIGHT`	Icon on the right side of the text.

disabled

Sets the disabled state of the link.

 <template>
    <NavLink 
        disabled
    />
</template>

Type: boolean
Default: false

to

Sets the link to the desired route.

 <template>
    <NavLink 
        to="/some/route"
    />
</template>

Type: string
Default: '/'

isExternal

Sets the link to an external route.

 <template>
    <NavLink 
        isExternal
    />
</template>

Type: boolean
Default: false

textClass

Sets the class of the text.

 <template>
    <NavLink 
        textClass="font-semibold"
    />
</template>

Type: string
Default: 'font-semibold'