Nav

Sub-components for Navbar, Sidebar, and Tabs.

Usage

Simple Navigation

• To Sign
• To Review
• Disabled

preview

<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

• To Sign
• To Review
• Auditrail

• To Sign
• To Review
• Auditrail

• To Sign
• To Review
• Auditrail

preview

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

• To Sign
• To Review
• Auditrail

• To Sign
• To Review
• Auditrail

preview

<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

• To Sign
• To Review
• Auditrail

• To Sign
• To Review
• Auditrail

• To Sign
• To Review
• Auditrail

preview

<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

• To Sign
• To Review
• Auditrail

preview

<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

• To Sign 25
• To Review 25

• To Sign 25
• To Review 25

preview

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

Dropdown

• To Sign
• To Review

• To Sign
• To Review

preview

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

• To Sign
• To Review
• Auditrail

preview

<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

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

Default Submenu

• Home
• Documents
  • To Sign
  • To Review
• Contacts

preview

<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

• Home
• Documents
  • To Sign
  • To Review
• Contacts

preview

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

• Need Action
• In Progress
• Others

• To Sign
• To Review
• Auditrail

preview

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

• Document
• Need Action
• In Progress
• Others

• Quick Jump
• To Sign
• To Review
• Auditrail

preview

<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

• Quick JumpSee More
• To Sign
• To Review
• Auditrail

preview

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

Props	Type	Default	Description
variant	String	pills	Navigation variant, valid value is pills, lines and tabs
fill	Boolean	false	Activate fullwidth navigation with fill type
justified	Boolean	false	Activate fullwidth navigation with justified type
align	String	left	Navigation alignment, valid value is left, center, and right
vertical	Boolean	false	Activate vertical navigation
title	String	undefined	Title to place in the top of navigation block
title-action-label	String	undefined	Title action label to place in the section title
title-action-url	String	undefined	Title action url to place in the section title
condensed	Boolean	false	Activate condensed navigation with less space

Slots <p-nav>

Name	Description
default	Content to place in the Nav

Props <p-nav-item>

Props	Type	Default	Description
active	Boolean	false	Place component in the active state with active styling
disabled	Boolean	false	Disables component functionality and place it in disabled state
href	String or RouteLocationRaw	undefined	Target URL of the link
target	String	_self	Sets the target attribute on the rendered link, valid value is _blank, _self, _parent, dan _top

Slots <p-nav-item>

Name	Description
default	Content to place in the nav item
icon	Content to place icon in nav item

Props <p-nav-form>

Props	Type	Default	Description
There no props here

Slots <p-nav-form>

Name	Description
default	Content to place form input in the navigation

Props <p-nav-text>

Props	Type	Default	Description
There no props here

Slots <p-nav-text>

Name	Description
default	Content to place text or image in the navigation

Props <p-nav-sub-item>

Props	Type	Default	Description
text	String	undefined	Place text in the submenu parent
collapsible	Boolean	false	Enable collapsible Submenu

Slots <p-nav-sub-item>

Name	Description
default	Content to place in the submenu item

Props <p-nav-item-dropdown>

Props	Type	Default	Description
text	String	undefined	Text to place in the toggle element (link) of dropdown
divider	Boolean	false	Enable divider in dropdown-item
menu-class	String or Array or Object	undefined	CSS class to add in the menu container
menu-size	String	sm	Dropdown menu-container size, valid value is sm, md and lg

Slots <p-nav-item-dropdown>

Name	Description
default	Content to place in the nav item dropdown
button-content	Can be used to place custom text, icon or more styling

Events

Name	Arguments	Description
There no event here