Nav
Navigation components make use of the base <INav> component for building all types of navigation styles.
<template>
<INav class="texs">
<INavItem href="https://inkline.io">Link</INavItem>
<INavItem :to="{ path: '/docs/components/nav' }">Router Link</INavItem>
<INavItem>Item</INavItem>
<INavItem disabled>Disabled</INavItem>
</INav>
</template>
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.
You can stack nav items into a vertical navigation component by setting the vertical property on your <INav>.
<template>
<INav vertical>
<INavItem href="https://inkline.io">Link</INavItem>
<INavItem :to="{ path: '/docs/components/nav' }">Router Link</INavItem>
<INavItem>Item</INavItem>
<INavItem disabled>Disabled</INavItem>
</INav>
</template>
You're able to use the color modifier to control the color of your navs, using one of the available variants: light, or dark.
<template>
<INav color="light" class="_background:light">
<INavItem href="https://inkline.io">Link</INavItem>
<INavItem :to="{ path: '/docs/components/nav' }">Router Link</INavItem>
<INavItem>Item</INavItem>
<INavItem>Item</INavItem>
<INavItem disabled>Disabled</INavItem>
</INav>
<INav color="dark" class="_background:dark">
<INavItem href="https://inkline.io">Link</INavItem>
<INavItem :to="{ path: '/docs/components/nav' }">Router Link</INavItem>
<INavItem>Item</INavItem>
<INavItem>Item</INavItem>
<INavItem disabled>Disabled</INavItem>
</INav>
</template>
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.
<template>
<INav size="sm">
<INavItem>Item</INavItem>
<INavItem>Item</INavItem>
<INavItem>Item</INavItem>
</INav>
<INav size="md">
<INavItem>Item</INavItem>
<INavItem>Item</INavItem>
<INavItem>Item</INavItem>
</INav>
<INav size="lg">
<INavItem>Item</INavItem>
<INavItem>Item</INavItem>
<INavItem>Item</INavItem>
</INav>
</template>
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.
<template>
<INav>
<INavItem href="https://inkline.io">Link</INavItem>
<INavItem :to="{ path: '/docs/components/nav' }">Router Link</INavItem>
</INav>
</template>
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.
<template>
<INav>
<INavItem :to="{ path: '/docs/components/nav' }" exact-active-class="-active">
Active Router Link
</INavItem>
<INavItem active> Active Item </INavItem>
</INav>
</template>
INav
INavItem
INav
INavItem
INavItem