Nav
Navs are basic navigation components that provide alignment and spacing between items.
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 Variant
You can stack nav items into a vertical navigation component by setting the vertical
property on your <i-nav>
.
Color Variants
You’re able to use the color
modifier to control the color of your navs, using one of the available variants: light
, or dark
.
Size Variants
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
.
Linking and Routing
Nav items will be automatically converted to link anchors <a>
when providing a href
property. You can also specify target
and rel
properties.
The <i-nav-item>
component is well integrated with the Vue Router plugin and will be converted to a <router-link>
when using the to
property.
Active State
You can control the active state of your <i-nav-item>
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
.
Configuration
Props
Use props to modify the component’s design and behavior.
<i-nav>
- Property
color
Type'light' | 'dark'
Default'light'
Description The color variant of the nav - Property
size
Type'sm' | 'md' | 'lg'
Default'md'
Description The size variant of the nav - Property
vertical
TypeBoolean
Defaultfalse
Description Display the nav with vertical orientation
<i-nav-item>
- Property
active
TypeBoolean
Defaultfalse
Description The active state of the nav item - Property
disabled
TypeBoolean
Defaultfalse
Description The disabled state of the nav item - Property
stopPropagation
TypeBoolean
Defaultfalse
Description Used to close the nearest navbar or sidebar by propagating the onClick event - Property
tag
TypeString
Default'div'
Description Set the HTML tag to be used for rendering the nav item - Property
tabindex
TypeNumber | String
Default1
Description The tabindex of the list group item
Slots
Use slots to insert custom content into well-defined component locations.
<i-nav>
- Property
default
Description Slot for default nav content
<i-nav-item>
- Property
default
Description Slot for default nav item content
CSS Variables
Read more about configuring Inkline’s Design System variables to update the look and feel of the component.
- Property
----font-size
Valuefont-size()
Description The font size of the nav component - Property
----padding-top
Valuevar(--padding-top)
Description The padding top of the nav component - Property
----padding-right
Valuevar(--padding-right)
Description The padding right of the nav component - Property
----padding-bottom
Valuevar(--padding-bottom)
Description The padding bottom of the nav component - Property
----padding-left
Valuevar(--padding-left)
Description The padding left of the nav component - Property
----padding
Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
Description The padding of the nav component - Property
----color
Valuecontrast-color($color-light)
Description - Property
----color-active
Valuecolor('primary')
Description The color of the nav component item when active - Property
----color-disabled
Valuevar(--text-muted)
Description The color of the nav component item when disabled