Nav

Example

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.

Vertical

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

Vertical 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.

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

API

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