PubNavbar

This is a navbar component which can be used to display a navigation menu in a header. It can be customized with various styles and features such as sticky behavior, rounded corners, and a solid background. Additionally, it can include a logo, a menu icon for mobile view, and a dropdown menu for larger screens.

Default Usage

Vuelicity

• Home
• Services
• Pricing
• Contact

<template>
  <pub-navbar>
    <template #logo>
      <pub-navbar-logo>
        Vuelicity
      </pub-navbar-logo>
    </template>
    <template #default="{ isShowMenu }">
      <pub-navbar-collapse :is-show-menu="isShowMenu">
        <pub-navbar-link
          is-active
          link="#"
        >
          Home
        </pub-navbar-link>
        <pub-navbar-link link="#">
          Services
        </pub-navbar-link>
        <pub-navbar-link link="#">
          Pricing
        </pub-navbar-link>
        <pub-navbar-link link="#">
          Contact
        </pub-navbar-link>
      </pub-navbar-collapse>
    </template>
  </pub-navbar>
</template>

<script lang="ts" setup>
import { PubNavbar, PubNavbarCollapse, PubNavbarLink, PubNavbarLogo } from 'vuelicity'
</script>

Solid background

Vuelicity

• Home
• Services
• Pricing
• Contact

<template>
  <pub-navbar solid>
    <template #logo>
      <pub-navbar-logo>
        Vuelicity
      </pub-navbar-logo>
    </template>
    <template #default="{ isShowMenu }">
      <pub-navbar-collapse :is-show-menu="isShowMenu">
        <pub-navbar-link
          is-active
          link="#"
        >
          Home
        </pub-navbar-link>
        <pub-navbar-link link="#">
          Services
        </pub-navbar-link>
        <pub-navbar-link link="#">
          Pricing
        </pub-navbar-link>
        <pub-navbar-link link="#">
          Contact
        </pub-navbar-link>
      </pub-navbar-collapse>
    </template>
  </pub-navbar>
</template>

<script lang="ts" setup>
import { PubNavbar, PubNavbarCollapse, PubNavbarLink, PubNavbarLogo } from 'vuelicity'
</script>

Navbar with dropdown

Vuelicity

• Home
• Services
• Pricing
• Contact

<template>
  <pub-navbar>
    <template #logo>
      <pub-navbar-logo> Vuelicity </pub-navbar-logo>
    </template>

    <template #default="{ isShowMenu }">
      <pub-navbar-collapse :is-show-menu="isShowMenu">
        <pub-navbar-link
          is-active
          link="#"
        >
          Home
        </pub-navbar-link>
        <pub-navbar-link link="#">
          Services
        </pub-navbar-link>
        <pub-navbar-link link="#">
          Pricing
        </pub-navbar-link>
        <pub-navbar-link link="#">
          Contact
        </pub-navbar-link>
        <pub-dropdown
          color="none"
          text="Profile"
          type="navlink"
        >
          <nav class="py-2 text-sm text-grey-700">
            <a
              href="#"
              class="block px-4 py-2 hover:bg-grey-100"
            > Dashboard </a>
            <a
              href="#"
              class="block px-4 py-2 hover:bg-grey-100"
            > Settings </a>
            <a
              href="#"
              class="block px-4 py-2 hover:bg-grey-100"
            > Earnings </a>
          </nav>
        </pub-dropdown>
      </pub-navbar-collapse>
    </template>
  </pub-navbar>
</template>

<script lang="ts" setup>
import { PubDropdown, PubNavbar, PubNavbarCollapse, PubNavbarLink, PubNavbarLogo } from 'vuelicity'
</script>

Navbar with action button

Vuelicity

• Home
• Services
• Pricing
• Contact

<template>
  <pub-navbar>
    <template #logo>
      <pub-navbar-logo>
        Vuelicity
      </pub-navbar-logo>
    </template>

    <template #default="{ isShowMenu }">
      <pub-navbar-collapse :is-show-menu="isShowMenu">
        <pub-navbar-link
          is-active
          link="#"
        >
          Home
        </pub-navbar-link>
        <pub-navbar-link link="#">
          Services
        </pub-navbar-link>
        <pub-navbar-link link="#">
          Pricing
        </pub-navbar-link>
        <pub-navbar-link link="#">
          Contact
        </pub-navbar-link>
      </pub-navbar-collapse>
    </template>

    <template #right-side>
      <pub-button color="blue">
        Get started
      </pub-button>
    </template>
  </pub-navbar>
</template>

<script lang="ts" setup>
import { PubButton, PubNavbar, PubNavbarCollapse, PubNavbarLink, PubNavbarLogo } from 'vuelicity'
</script>

Reference

PubNavbar

Properties

Name	Type	Default	Description	Options
class	String	''	Additional CSS classes to apply.
containerClass	String	''	Additional CSS classes to apply to the container.
sticky	Boolean	false	Whether the navbar should be sticky.
rounded	Boolean	false	Whether the navbar should have rounded corners.
solid	Boolean	false	Whether the navbar should have a solid background.
theme	String	'default'	The theme of the navbar.	'default', 'light', 'dark'

Slots

Name	Description
logo	Slot for the logo.
menu-icon	Slot for the menu icon (mobile view).
default	Default slot for navbar content.
right-side	Slot for content on the right side of the navbar.

PubNavbarLogo

Properties

Name	Type	Default	Description	Options
link	String	''	The URL to navigate to when the logo is clicked.
imageUrl	String	''	The URL of the logo image.
alt	String	''	Alternative text for the logo image.
as	String	'a'	The HTML element to use for the logo.	'a', 'router-link'
linkAttr	String	'href'	The attribute to use for the link.	'href', 'to'

Slots

Name	Description
default	Default slot for logo content.

PubNavbarCollapse

Properties

Name	Type	Default	Description	Options
class	String	''	Additional CSS classes to apply.
isShowMenu	Boolean	false	Whether the menu should be shown.

Slots

Name	Description
default	Default slot for menu content.

PubNavbarLink

Properties

Name	Type	Default	Description	Options
link	String	''	The URL to navigate to when the link is clicked.
as	String	'a'	The HTML element to use for the link.	'a', 'button'
linkAttr	String	'href'	The attribute to use for the link.	'href', 'to'
isActive	Boolean	false	Whether the link is active.
disabled	Boolean	false	Whether the link is disabled.
class	String	''	Additional CSS classes to apply.

Slots

Name	Description
default	Default slot for link content.