Nav

Defines different styles for list navigations.

Usage

Use the vk-nav component combined with one of it sub components.

<vk-nav>
  <vk-nav-item href title active></vk-nav-item>
  <vk-nav-item href title></vk-nav-item>
</vk-nav>

Nested navs

Use the vk-nav-item-parent component as a nesting parent for sub items.

<vk-nav>
  <vk-nav-item-parent href title>
    <vk-nav-item href title></vk-nav-item>
    <vk-nav-item href title></vk-nav-item>
    <vk-nav-item-parent href title>...</vk-nav-item-parent>
  </vk-nav-item-parent>
</vk-nav>

Header & divider

Use one of the following components in a list to create a header or a divider between items.

<vk-nav-item-header title></vk-nav-item-header>

<vk-nav-item-divider title></vk-nav-item-divider>

Type modifier

The type prop allows controlling the nav style. Set it as primary to give the nav a more distinct styling, for example when placing it inside a modal.

Note To remove all styling set the the prop with blank value.

<vk-nav type="primary">...</vk-nav>

Center modifier

Set the center prop to center nav items. This can be combined with the default and primary style modifiers. You can place the nav inside cards or anywhere else in your content.

<uk-nav center>...</uk-nav>

Nav in Dropdown

Use the vk-nav-dropdown component to place a nav inside a default dropdown from the Dropdown component.

<vk-dropdown>
  <vk-nav-dropdown>...</vk-nav-dropdown>
</vk-dropdown>

Nav in Offcanvas

A nav can be used inside an offcanvas from the Offcanvas component.

Props

vk-nav

vk-nav-item

vk-nav-item-parent

vk-nav-item-header