Navs are basic navigation components that provide alignment and spacing between items.
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
You can stack nav items into a vertical navigation component by setting the
vertical property on your
You're able to use the
size modifier to control the size of your navs, using one of the available sizes:
lg. The default size is set to
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
exact-active-class properties and set them to
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.
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.