Navbar
Base dashboard navbar.
Usage
Simple Navbar
preview
vue
<template>
<p-navbar>
<p-navbar-brand>
<img src="assets/images/icon-privy.svg" />
</p-navbar-brand>
<p-navbar-nav>
<p-nav-item active>Label</p-nav-item>
<p-nav-item>Label</p-nav-item>
<p-nav-item>Label</p-nav-item>
</p-navbar-nav>
</p-navbar>
</template>Navbar Brand
Navbar brand is used for company, product, or project name. You can add permalink in navbar brand by prop href. Navbar brand can be an image or text and combination of both.
Text
preview
vue
<template>
<p-navbar>
<p-navbar-brand>
Persona
</p-navbar-brand>
</p-navbar>
</template>Image and Text
preview
vue
<template>
<p-navbar>
<p-navbar-brand>
<img src="assets/images/logo.svg" /> Persona
</p-navbar-brand>
</p-navbar>
</template>Fixed Navbar
Fixed navbar are using z-fixed for z-index value. It posible to change z-index value using CSS variable --p-navbar-z-index. But don't forget to see the all z-index variant for layer-ordering component.
preview
vue
<template>
<p-navbar fixed>
<p-navbar-brand>
<img src="assets/images/logo.svg" />
</p-navbar-brand>
<p-navbar-nav>
<p-nav-item active>Home</p-nav-item>
<p-nav-item>Products</p-nav-item>
</p-navbar-nav>
</p-navbar>
</template>Variants
Navbar has 2 variant of nav type: pills and lines.
preview
vue
<template>
<p-navbar variant="pills">
<p-navbar-brand>
<img src="assets/images/logo.svg" />
</p-navbar-brand>
<p-navbar-nav>
<p-nav-item active>Label</p-nav-item>
</p-navbar-nav>
</p-navbar>
<p-navbar variant="lines">
<p-navbar-brand>
<img src="assets/images/logo.svg" />
</p-navbar-brand>
<p-navbar-nav>
<p-nav-item active>Label</p-nav-item>
</p-navbar-nav>
</p-navbar>
</template>Alignment
To align Navigation, use align prop in <p-navbar-nav>. Available value are left, right and center
preview
vue
<template>
<p-navbar>
<p-navbar-nav align="left">
<p-nav-item active>Label</p-nav-item>
<p-nav-item>Label</p-nav-item>
</p-navbar-nav>
</p-navbar>
<p-navbar>
<p-navbar-nav align="center">
<p-nav-item active>Label</p-nav-item>
<p-nav-item>Label</p-nav-item>
</p-navbar-nav>
</p-navbar>
<p-navbar>
<p-navbar-nav align="right">
<p-nav-item>Label</p-nav-item>
<p-nav-item active>Label</p-nav-item>
</p-navbar-nav>
</p-navbar>
</template>With Icon
preview
vue
<template>
<p-navbar class="mb-5">
<p-navbar-nav>
<p-nav-item active>
<template #icon>
<IconPersona />
</template>
Label
</p-nav-item>
<p-nav-item>
<template #icon>
<IconPersona />
</template>
Label
</p-nav-item>
</p-navbar-nav>
</p-navbar>
</template>With Form
preview
vue
<template>
<p-navbar>
<p-navbar-brand>
<img src="assets/images/logo.svg" />
</p-navbar-brand>
<p-navbar-nav>
<p-nav-form>
<p-input-group>
<p-input placeholder="Search" />
<p-button variant="input">
Submit
</p-button>
</p-input-group>
</p-nav-form>
</p-navbar-nav>
</p-navbar>
</template>Condensed Navigation
preview
vue
<template>
<p-navbar>
<p-navbar-nav condensed>
<p-nav-item active>Label</p-nav-item>
<p-nav-item>Label</p-nav-item>
<p-nav-item>Label</p-nav-item>
</p-navbar-nav>
</p-navbar>
</template>Dropdown
preview
vue
<template>
<p-navbar>
<p-navbar-nav>
<p-nav-item active>
<template #icon>
<IconPersona />
</template>
Label
</p-nav-item>
<p-nav-item-dropdown>
<template #button-content>
<IconPersona /> Label
</template>
<p-dropdown-item>Children 1</p-dropdown-item>
<p-dropdown-item>Children 2</p-dropdown-item>
<p-dropdown-item>Children 3</p-dropdown-item>
</p-nav-item-dropdown>
</p-navbar-nav>
</p-navbar>
</template>Responsive
Navbar support responsive by adding toggleable prop in <p-navbar> with available value lg, md and sm. Then <p-navbar-toggle> used with <p-collapse is-nav> component. Max height of navbar collapse is 20rem by default, but it's very possible to custom it via --p-navbar-collapse-max-height variable.
preview
vue
<template>
<p-navbar toggleable="lg">
<p-navbar-brand>
<img src="assets/images/logo.svg" />
</p-navbar-brand>
<p-navbar-toggle @click="menu =! menu">
<template #default="{ expanded }">
<IconPersona v-if="expanded" />
<IconView v-else />
</template>
</p-navbar-toggle>
<p-collapse v-model="menu" is-nav>
<p-navbar-nav>
<p-nav-item active>
Label
</p-nav-item>
</p-navbar-nav>
</p-collapse>
</p-navbar>
</template>
<script setup>
import IconPersona from '@privyid/persona-icon/vue/persona/20.vue'
import IconView from '@privyid/persona-icon/vue/view/20.vue'
const menu = ref(false)
</script>Custom
preview
vue
<template>
<p-navbar>
<div class="flex flex-row">
<div class="transition-all duration-200 ease-in-out basis-2/4 focus-within:basis-full">
<p-navbar-nav>
<p-input-group>
<p-input-group-addon>
<IconSearch />
</p-input-group-addon>
<p-input placeholder="Search" />
</p-input-group>
</p-navbar-nav>
</div>
</div>
<p-navbar-nav align="right">
<p-nav-item>
<template #icon>
<IconNotif />
</template>
</p-nav-item>
<p-nav-item-dropdown no-caret size="xs" variant="outline">
<template #button-content>
<span class="flex items-center space-x-2">
<p-avatar size="xs">
<IconUser />
</p-avatar>
<span class="block text-left">
<span class="text-sm">Tarjono Sujono</span>
<p-caption size="xs">Personal Account</p-caption>
</span>
<IconChevron />
</span>
</template>
<p-dropdown-item>Edit Profile</p-dropdown-item>
<p-dropdown-item>Preference</p-dropdown-item>
<p-dropdown-item>Sign out</p-dropdown-item>
</p-nav-item-dropdown>
<p-nav-text>
<p-avatar src="https://picsum.photos/50" />
</p-nav-text>
</p-navbar-nav>
</p-navbar>
</template>Navbar with CTA
preview
vue
<template>
<p-navbar>
<p-navbar-brand>
<img src="../../public/assets/images/logo-privy.svg" />
</p-navbar-brand>
<p-navbar-nav>
<p-nav-item active>Home</p-nav-item>
<p-nav-item>Products</p-nav-item>
</p-navbar-nav>
<p-navbar-nav align="right">
<p-nav-form>
<p-button href="#" variant="link">Login</p-button>
<p-button href="#" color="info">Create Free Account</p-button>
</p-nav-form>
</p-navbar-nav>
</p-navbar>
</template>Variables
Navbar use local CSS variables on .navbar for enhanced real-time customization.
sass
--p-navbar-z-index: theme(zIndex.fixed);
--p-navbar-sticky-top: theme(spacing.0);
--p-navbar-collapse-max-height: 20rem; /* 320px */
--p-navbar-padding-x: theme(spacing.3);
--p-navbar-padding-left: var(--p-navbar-padding-x);
--p-navbar-padding-right: var(--p-navbar-padding-x);
--p-navbar-padding-y: theme(spacing.3);
--p-navbar-padding-top: var(--p-navbar-padding-y);
--p-navbar-padding-bottom: var(--p-navbar-padding-y);
--p-navbar-bg: theme(backgroundColor.default.DEFAULT);
--p-navbar-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
--p-navbar-shadow: none;
--p-navbar-shadow-on-scroll: theme(boxShadow.lg);API
Props <p-navbar>
| Props | Type | Default | Description |
|---|---|---|---|
variant | String | pills | Navbar variant, valid value is pills and lines |
condensed | Boolean | false | Activate condensed navigation with less space |
fixed | Boolean | false | Activate fixed Navbar |
sticky | Boolean | false | Activate sticky Navbar |
toggleable | String | - | automatically expand navigation with desired breakpoint |
Slots <p-navbar>
| Name | Description |
|---|---|
default | Content to place in the Navbar |
Props <p-navbar-brand>
| Props | Type | Default | Description |
|---|---|---|---|
href | String | undefined | Target URL of the Navbar Brand link |
Slots <p-navbar-brand>
| Name | Description |
|---|---|
default | Content to place in the Navbar Brand |
Props <p-navbar-nav>
| Props | Type | Default | Description |
|---|---|---|---|
align | String | left | Navbar alignment, valid value is left, center and right |
Slots <p-navbar-nav>
| Name | Description |
|---|---|
default | Content to place in the Navbar Nav |
Props <p-navbar-toggle>
| Props | Type | Default | Description |
|---|---|---|---|
| There no prop here | |||
Slots <p-navbar-toggle>
| Name | Description |
|---|---|
default | Content to place expanded or collapsed icon in the Navbar Toggle |
Events <p-navbar-toggle>
| Name | Arguments | Description |
|---|---|---|
click | Native DOM Event object | Event when navbar toggle is clicked |