Need help with Vue or Nuxt? We build fast apps, custom UI libraries, and help you move to Vue 3 and Nuxt 3 — start with a free 2-week trial.
Talk to an Engineer

Sidebar item
#

Used as link in your VaSidebar.

Examples
#

Simple usage example
#

VaSidebarItem is used with VaSidebarContent (to create paddings) and VaSidebarTitle (to fill all remaining width in VaSidebarItem)

I'm default
I'm centered!
I'm active
Open in GitHub

Colors
#

You can change sidebar default colors

Success hover color
Danger text color
Warning active color (active)
Open in GitHub

Highlight active VaSidebarItem
#

It is possible to have multiple VaSidebarItem highlighted. You can choose your own way to highlight an active item. Even if you want to activate a few VaSidebarItems.

Home
Docs
Media
Open in GitHub

VaSidebarTitle and VaIcons
#

VaSidebarTitle used to fill all remaining free space in VaSidebarItem. We can also add any other components (like VaIcon, VaChip or VaButton).

Home
Docs (I'm active)
GO TO PARTY!
Something cool
New!
Open in GitHub

Advanced case with VaAccordion
#

VaSidebarItem can be used with VaAccordion and VaCollapses.

Home
Docs
Components
Button
Input
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
active

If true this sidebar item will be highlighted

Boolean

false

activeClass

Applied when the link is active. More info here.

String

-

activeColor

Used to set accent color for active VaSidebarItem

String

"primary"

append

When set, always appends the relative path to the current path. More info here.

Boolean

-

borderColor

Color CSS style border (theme supported options or HEX).

String

-

disabled

Applies disabled style and removes all user interaction effects.

Boolean

false

exact

Exactly match the link. Without this, '/' will match every route. More info here.

Boolean

-

exactActiveClass

Applied when the link is active with exact match. More info here.

String

-

hoverColor

Used to set accent color for hovered VaSidebarItem

String

-

hoverOpacity

Used to set opacity of the color for hovered VaSidebarItem

Number | String

0.2

href

Designates the component as anchor and applies the href attribute. More info here.

String

-

preset

Named preset combination of component props.

String | Array

-

replace

When set, calls router.replace() instead of router.push() when navigated, so it will not leave a history record. More info here.

Boolean

-

tag

Replaces html tag. This is useful for semantics and also to allow for valid markup in some cases (ul > li and tr > td etc.).

String

"span"

target

Navigation target, More info here.

String

-

textColor

Text color (theme string or HEX string).

String

-

to

The target route of the link. More info here.

String | Object

-