Nav

Navigation components make use of the base <INav> component for building all types of navigation styles.

Behind the scenes, the <INavItem> is converted into a <RouterLink> if it has the :to property, or a plain <a> tag if it has a href property. Otherwise, it uses a simple <div> tag.

Vertical Variant

You can stack nav items into a vertical navigation component by setting the vertical property on your <INav>.

Color Variants

You're able to use the color modifier to control the color of your navs, using one of the available variants: light, or dark.

Size Variants

You're able to use the size modifier to control the size of your navs, using one of the available sizes: sm, md, and lg. The default size is set to md.

Linking and Routing

Nav items will be automatically converted to link anchors <a> when providing a href property. You can also specify target and rel properties.

The <INavItem> component is well integrated with the Vue Router plugin and will be converted to a <RouterLink> when using the to property.

Active State

You can control the active state of your <INavItem> using the active property. When you provide a to property you're converting the component into a router-link, therefore you can use the active-class and exact-active-class properties and set them to -active.

Props

INav
INavItem

Slots

INav
INavItem

Design Tokens

INavItem