Navbar

Base dashboard navbar.

Usage

Simple Navbar

• Home
• Products
• Solutions

preview

<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

Persona

preview

<template>
  <p-navbar>
    <p-navbar-brand>
      Persona
    </p-navbar-brand>
  </p-navbar>
</template>

Image and Text

Persona

preview

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

• Home
• Products

preview

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

• Label

• Label

preview

<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

• Label
• Label

• Label
• Label

• Label
• Label

preview

<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

• Label
• Label

preview

<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

• Label
• Label

preview

<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

• Label
• Label
• Label

preview

<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

• Label

preview

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

• Label

preview

<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

<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

• Home
• Products

• LoginCreate Free Account

preview

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

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

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