Nav

Example

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

<i-nav>
    <i-nav-item href="https://inkline.io">Link</i-nav-item>
    <i-nav-item :to="{ name: 'index' }">Router Link</i-nav-item>
    <i-nav-item>Item</i-nav-item>
    <i-nav-item disabled>Disabled</i-nav-item>
</i-nav>

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

<i-nav vertical>
    <i-nav-item href="https://inkline.io">Link</i-nav-item>
    <i-nav-item :to="{ name: 'docs-components-nav' }">Router Link</i-nav-item>
    <i-nav-item>Item</i-nav-item>
    <i-nav-item disabled>Disabled</i-nav-item>
</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.

<i-nav color="light" class="_background:light">
    <i-nav-item href="https://inkline.io">Link</i-nav-item>
    <i-nav-item :to="{ name: 'docs-components-nav' }">Router Link</i-nav-item>
    <i-nav-item>Item</i-nav-item>
    <i-nav-item>Item</i-nav-item>
    <i-nav-item disabled>Disabled</i-nav-item>
</i-nav>

<i-nav color="dark" class="_background:dark">
    <i-nav-item href="https://inkline.io">Link</i-nav-item>
    <i-nav-item :to="{ name: 'docs-components-nav' }">Router Link</i-nav-item>
    <i-nav-item>Item</i-nav-item>
    <i-nav-item>Item</i-nav-item>
    <i-nav-item disabled>Disabled</i-nav-item>
</i-nav>

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.

<i-nav size="sm">
    <i-nav-item>Item</i-nav-item>
    <i-nav-item>Item</i-nav-item>
    <i-nav-item>Item</i-nav-item>
</i-nav>

<i-nav size="md">
    <i-nav-item>Item</i-nav-item>
    <i-nav-item>Item</i-nav-item>
    <i-nav-item>Item</i-nav-item>
</i-nav>

<i-nav size="lg">
    <i-nav-item>Item</i-nav-item>
    <i-nav-item>Item</i-nav-item>
    <i-nav-item>Item</i-nav-item>
</i-nav>

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.

<i-nav>
    <i-nav-item href="https://inkline.io">Link</i-nav-item>
    <i-nav-item :to="{ name: 'index' }">Router Link</i-nav-item>
</i-nav>

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.

<i-nav>
    <i-nav-item :to="{ name: 'docs-components-nav' }" exact-active-class="-active">
        Active Router Link
    </i-nav-item>
    <i-nav-item active>
        Active Item
    </i-nav-item>
</i-nav>

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