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

Nav Example

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.


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

Vertical Nav


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.

Nav Sizes

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.

Nav Active State


Nav API <i-nav>
Property Description Type Accepted Default
size Sets the size of the nav component. String sm, md, lg md
vertical Sets the nav to be laid out vertically. Boolean true, false false
Nav Item API <i-nav-item>
Property Description Type Accepted Default
active Sets the nav item state as active. Boolean true, false false
disabled Sets the nav item state as disabled. Boolean true, false false
tag Sets the tag to be used for the component. If to or href attribute is provided, an a tag will be used. String div