Subnav

Defines different styles for a sub navigation.

Usage

Use the vk-subnav component with vk-subnav-item as items within the list.

<vk-subnav>
  <vk-subnav-item title></vk-subnav-item>
  <vk-subnav-item title></vk-subnav-item>
  <vk-subnav-item title disabled></vk-subnav-item>
</vk-subnav>

Note For a better layout, if items should wrap into the next row, use the Margin directive.

Divided modifier

Set the divided prop to separate menu items with lines.

<vk-subnav divided>...</vk-subnav>

Pill modifier

Set the pill prop to highlight the active menu item with a background.

<vk-subnav pill>...</vk-subnav>

Subnav with Dropdown

You can also use a dropdown from the Dropdown component with vk-subnav-item-dropdown.

<vk-subnav>
  <vk-subnav-item-dropdown title>
    <vk-nav-dropdown>...</vk-nav-dropdown>
  </vk-subnav-item-dropdown>
</vk-subnav>

Sync active item

By default the active item state is internal but you can sync it with your context using the active-item prop. To easier identify the items set a unique key to each of them, otherwise they id will default to their index.

<vk-subnav :active-item.sync>
  <vk-subnav-item title key="first"></vk-subnav-item>
  <vk-subnav-item title key="second"></vk-subnav-item>
  <vk-subnav-item title key="third"></vk-subnav-item>
</vk-subnav>

Props

vk-subnav

vk-subnav-item

vk-subnav-item-dropdown