Persona

Appearance

On this page

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 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>
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>
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-y: theme(spacing.3);
--p-navbar-bg: theme(backgroundColor.default.DEFAULT);
--p-navbar-bg-dark: theme(backgroundColor.dark.default.DEFAULT);

API ​

Props <p-navbar> ​

PropsTypeDefaultDescription
variantStringpillsNavbar variant, valid value is pills and lines
condensedBooleanfalseActivate condensed navigation with less space
fixedBooleanfalseActivate fixed Navbar
stickyBooleanfalseActivate sticky Navbar
toggleableString-automatically expand navigation with desired breakpoint

Slots <p-navbar> ​

NameDescription
defaultContent to place in the Navbar

Props <p-navbar-brand> ​

PropsTypeDefaultDescription
hrefStringundefinedTarget URL of the Navbar Brand link

Slots <p-navbar-brand> ​

NameDescription
defaultContent to place in the Navbar Brand

Props <p-navbar-nav> ​

PropsTypeDefaultDescription
alignStringleftNavbar alignment, valid value is left, center and right

Slots <p-navbar-nav> ​

NameDescription
defaultContent to place in the Navbar Nav

Props <p-navbar-toggle> ​

PropsTypeDefaultDescription
There no prop here

Slots <p-navbar-toggle> ​

NameDescription
defaultContent to place expanded or collapsed icon in the Navbar Toggle

Events <p-navbar-toggle> ​

NameArgumentsDescription
clickNative DOM Event objectEvent when navbar toggle is clicked

Released under the MIT License.

Copyright © 2022 Privy Identitas Digital