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, PubNavbarLogo, PubNavbarCollapse, PubNavbarLink } 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, PubNavbarLogo, PubNavbarCollapse, PubNavbarLink } 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 theme="blue">
                Get started
            </pub-button>
        </template>
    </pub-navbar>
</template>

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

Reference

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.