Skip to content
On this page

Nav

Sub-components for Navbar, Sidebar, and Tabs.

Usage

Simple Navigation

vue
<template>
  <p-nav>
    <p-nav-item active>To Sign</p-nav-item>
    <p-nav-item>To Review</p-nav-item>
    <p-nav-item disabled>Disabled</p-nav-item>
  </p-nav>
</template>

Variants

Navigation has 3 variants, pills, tabs and lines. Default is pills

vue
<template>
  <p-nav variant="pills">
    <p-nav-item active>To Sign</p-nav-item>
    <p-nav-item>To Review</p-nav-item>
    <p-nav-item>Auditrail</p-nav-item>
  </p-nav>
  <p-nav variant="tabs">
    <p-nav-item active>To Sign</p-nav-item>
    <p-nav-item>To Review</p-nav-item>
    <p-nav-item>Auditrail</p-nav-item>
  </p-nav>
  <p-nav variant="lines">
    <p-nav-item active>To Sign</p-nav-item>
    <p-nav-item>To Review</p-nav-item>
    <p-nav-item>Auditrail</p-nav-item>
  </p-nav>
</template>

Fill & Justify

Navigation can be fullwidth. There are 2 options available: fill and justified. To proportionately fill all available space, choose fill. When need every nav item will be the same width, choose justified.

vue
<template>
  <p-nav fill>
    <p-nav-item active>To Sign</p-nav-item>
    <p-nav-item>To Review</p-nav-item>
    <p-nav-item>Auditrail</p-nav-item>
  </p-nav>
  <p-nav justified variant="pills">
    <p-nav-item active>To Sign</p-nav-item>
    <p-nav-item>To Review</p-nav-item>
    <p-nav-item>Auditrail</p-nav-item>
  </p-nav>
</template>

Alignment

To align Navigation, use align prop. Available value are left, right and center

vue
<template>
  <p-nav align="left">
    <p-nav-item active>To Sign</p-nav-item>
    <p-nav-item>To Review</p-nav-item>
    <p-nav-item disabled>Auditrail</p-nav-item>
  </p-nav>
  <p-nav align="center">
    <p-nav-item active>To Sign</p-nav-item>
    <p-nav-item>To Review</p-nav-item>
    <p-nav-item disabled>Auditrail</p-nav-item>
  </p-nav>
  <p-nav align="right">
    <p-nav-item active>To Sign</p-nav-item>
    <p-nav-item>To Review</p-nav-item>
    <p-nav-item disabled>Auditrail</p-nav-item>
  </p-nav>
</template>

With Icon & Badge

Icon

vue
<template>
  <p-nav>
    <p-nav-item active>
      <template #icon>
        <IconEdit />
      </template>
    </p-nav-item>
    <p-nav-item>
      <template #icon>
        <IconView />
      </template>
    </p-nav-item>
    <p-nav-item disabled>
      <template #icon>
        <IconDocument />
      </template>
    </p-nav-item>
  </p-nav>
  <p-nav fill>
    <p-nav-item active>
      <template #icon>
        <IconEdit />
      </template>
      To Sign
    </p-nav-item>
    <p-nav-item>
      <template #icon>
        <IconView />
      </template>
      To Review
    </p-nav-item>
    <p-nav-item disabled>
      <template #icon>
        <IconDocument />
      </template>
      Auditrail
    </p-nav-item>
  </p-nav>
</template>

Badge

vue
<template>
  <p-nav fill>
    <p-nav-item active>
      To Sign
      <p-badge variant="light">25</p-badge>
    </p-nav-item>
    <p-nav-item>
      To Review
      <p-badge variant="light">25</p-badge>
    </p-nav-item>
  </p-nav>
  <p-nav fill>
    <p-nav-item active>
      <template #icon>
        <IconView />
      </template>
      To Sign <p-badge variant="light">25</p-badge>
    </p-nav-item>
    <p-nav-item>
      <template #icon>
        <IconView />
      </template>
      To Review <p-badge variant="light">25</p-badge>
    </p-nav-item>
  </p-nav>
</template>
preview
vue
<template>
  <p-nav>
    <p-nav-item active>To Sign</p-nav-item>
    <p-nav-item>To Review</p-nav-item>
    <p-nav-item-dropdown icon>
      <template #button-content>
        <IconMenu />
      </template>
      <p-dropdown-item>Item Text</p-dropdown-item>
      <p-dropdown-item>Item Text</p-dropdown-item>
      <p-dropdown-item>Item Text</p-dropdown-item>
    </p-nav-item-dropdown>
  </p-nav>
  <p-nav fill>
    <p-nav-item active>To Sign</p-nav-item>
    <p-nav-item>To Review</p-nav-item>
    <p-nav-item-dropdown icon>
      <template #button-content>
        <IconMenu />
      </template>
      <p-dropdown-item>Item Text</p-dropdown-item>
      <p-dropdown-item>Item Text</p-dropdown-item>
      <p-dropdown-item>Item Text</p-dropdown-item>
    </p-nav-item-dropdown>
  </p-nav>
</template>

Vertical

Navigation by default appear on horizontal line. You can stack navigation by setting vertical prop.

vue
<template>
  <p-nav vertical class="w-80">
    <p-nav-item active>To Sign</p-nav-item>
    <p-nav-item>To Review</p-nav-item>
    <p-nav-item>Auditrail</p-nav-item>
  </p-nav>
</template>

Submenu just support in vertical navigation. If you need collapsible menus, you just add collapsible prop

Default Submenu

vue
<template>
  <p-nav vertical class="w-64">
    <p-nav-item active>Home</p-nav-item>
    <p-nav-sub-item text="Documents">
      <p-nav>
        <p-nav-item>To Sign</p-nav-item>
        <p-nav-item>To Review</p-nav-item>
      </p-nav>
    </p-nav-sub-item>
    <p-nav-item>Contacts</p-nav-item>
  </p-nav>
</template>

Collapsible Submenu

vue
<template>
  <p-nav vertical class="w-64">
    <p-nav-item active>Home</p-nav-item>
    <p-nav-sub-item text="Documents" collapsible>
      <p-nav>
        <p-nav-item>To Sign</p-nav-item>
        <p-nav-item>To Review</p-nav-item>
      </p-nav>
    </p-nav-sub-item>
    <p-nav-item>Contacts</p-nav-item>
  </p-nav>
</template>

Condensed Navigation

If you need less space/padding of navigation, you can set by using condensed prop.

vue
<template>
  <p-nav condensed>
    <p-nav-item active>Need Action</p-nav-item>
    <p-nav-item>In Progress</p-nav-item>
    <p-nav-item>Others</p-nav-item>
  </p-nav>
  <p-nav vertical condensed class="w-80">
    <p-nav-item>To Sign</p-nav-item>
    <p-nav-item>To Review</p-nav-item>
    <p-nav-item>Auditrail</p-nav-item>
  </p-nav>
</template>

Title

When you need title for grouping navigation, you can add navigation title by using title prop.

vue
<template>
  <p-nav title="Document">
    <p-nav-item disabled>Need Action</p-nav-item>
    <p-nav-item>In Progress</p-nav-item>
    <p-nav-item>Others</p-nav-item>
  </p-nav>
  <p-nav vertical title="Quick Jump" class="w-80">
    <p-nav-item>To Sign</p-nav-item>
    <p-nav-item>To Review</p-nav-item>
    <p-nav-item>Auditrail</p-nav-item>
  </p-nav>
</template>

Title with action

If we need some action in section title, you can add this by using title-action-label and title-action-url

vue
<template>
  <p-nav vertical title="Quick Jump" class="w-80" title-action-label="See More" title-action-url="#/categories">
    <p-nav-item>To Sign</p-nav-item>
    <p-nav-item>To Review</p-nav-item>
    <p-nav-item>Auditrail</p-nav-item>
  </p-nav>
</template>

API

Props <p-nav>

PropsTypeDefaultDescription
variantStringpillsNavigation variant, valid value is pills, lines and tabs
fillBooleanfalseActivate fullwidth navigation with fill type
justifiedBooleanfalseActivate fullwidth navigation with justified type
alignStringleftNavigation alignment, valid value is left, center, and right
verticalBooleanfalseActivate vertical navigation
titleStringundefinedTitle to place in the top of navigation block
title-action-labelStringundefinedTitle action label to place in the section title
title-action-urlStringundefinedTitle action url to place in the section title
condensedBooleanfalseActivate condensed navigation with less space

Slots <p-nav>

NameDescription
defaultContent to place in the Nav

Props <p-nav-item>

PropsTypeDefaultDescription
activeBooleanfalsePlace component in the active state with active styling
disabledBooleanfalseDisables component functionality and place it in disabled state
hrefString or RouteLocationRawundefinedTarget URL of the link
targetString_selfSets the target attribute on the rendered link, valid value is _blank, _self, _parent, dan _top

Slots <p-nav-item>

NameDescription
defaultContent to place in the nav item
iconContent to place icon in nav item

Props <p-nav-form>

PropsTypeDefaultDescription
There no props here

Slots <p-nav-form>

NameDescription
defaultContent to place form input in the navigation

Props <p-nav-text>

PropsTypeDefaultDescription
There no props here

Slots <p-nav-text>

NameDescription
defaultContent to place text or image in the navigation

Props <p-nav-sub-item>

PropsTypeDefaultDescription
textStringundefinedPlace text in the submenu parent
collapsibleBooleanfalseEnable collapsible Submenu

Slots <p-nav-sub-item>

NameDescription
defaultContent to place in the submenu item

Props <p-nav-item-dropdown>

PropsTypeDefaultDescription
textStringundefinedText to place in the toggle element (link) of dropdown
dividerBooleanfalseEnable divider in dropdown-item
menu-classString or Array or ObjectundefinedCSS class to add in the menu container
menu-sizeStringsmDropdown menu-container size, valid value is sm, md and lg

Slots <p-nav-item-dropdown>

NameDescription
defaultContent to place in the nav item dropdown
button-contentCan be used to place custom text, icon or more styling

Events

NameArgumentsDescription
There no event here

Released under the MIT License.