Nav

Example

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

Behind the scenes, the <i-nav-item> is converted into a <router-link> 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

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

Sizes

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.

Active State

You can control the active state of your <i-nav-item> using the active property. If you're providing a :to property, converting it into a router-link, you can use the active-class and exact-active-class properties and set them to -active.

Component API

Here you can find a list of the various customization options you can use for the nav components as props, as well as available slots.

Sass Variables

Here you can find a list of the Sass variables you can use for the nav components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.