PersonaNav
Usage
Simple Navigation
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 disabled>Disabled</p-nav-item>
</p-nav>
</template>Variants
Navigation has 3 variants, pills, tabs and lines. Default is pills
preview
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.
preview
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
preview
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
preview
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
preview
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>Dropdown
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.
preview
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
Submenu just support in vertical navigation. If you need collapsible menus, you just add collapsible prop
Default Submenu
preview
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
preview
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.
preview
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.
preview
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>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 |
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 | 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 |
menu-class | String or Array or Object | undefined | CSS class to add in the menu container |
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 | ||