A simple, pretty, mobile-friendly navbar component for your Vue 3 projects.
This component gives you a standard looking navigation bar for your app that can be easily defined using JSON or just an array of objects.
Basic Usage:
1. Import and register the navbar component.
import { createApp } from 'vue'; import VueNavigationBar from 'vue-navigation-bar'; import 'vue-navigation-bar/dist/vue-navigation-bar.css'; const app = createApp(App); app.component('vue-navigation-bar', VueNavigationBar);
2. Add the <<vue-navigation-bar /> component to the template and define your own nav items as follows:
<template> <vue-navigation-bar :options="navbarOptions" /> </template>
export default { ... data() { return { navbarOptions: { elementId: "main-navbar", isUsingVueRouter: true, mobileBreakpoint: 992, brandImagePath: "./", brandImage: require("../src/assets/images/lockup-color.png"), brandImageAltText: "brand-image", collapseButtonOpenColor: "#661c23", collapseButtonCloseColor: "#661c23", showBrandImageInMobilePopup: true, ariaLabelMainNav: "Main Navigation", tooltipAnimationType: "shift-away", tooltipPlacement: "bottom", menuOptionsLeft: [ { type: "link", text: "Why Dunder Mifflin", arrowColor: "#659CC8", subMenuOptions: [ { isLinkAction: true, type: "link", text: "About", subText: "Stupid corporate wet blankets. Like booze ever killed anyone.", path: { name: "about" }, iconLeft: '<i class="fa fa-star fa-fw"></i>' }, { type: "hr", }, { type: "link", text: "Locations", subText: "You\'re a presentation tool!", path: { name: "locations" } arrowColor: "#659CC8", }, { type: "hr", }, { type: "link", text: "Blog", subText: "I enjoy having breakfast in bed. I like waking up to the smell of bacon. Sue me.", path: { name: "blog" } }, ] }, { type: "link", text: "Contact", subMenuOptions: [ { type: "link", text: "Customer Service", path: { name: "customer-service" }, }, { type: "link", text: "Accounting", path: { name: "accounting" }, }, { type: "hr", }, { type: "link", text: "Reception", path: { name: "reception"}, iconLeft: '<svg id="i-telephone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M3 12 C3 5 10 5 16 5 22 5 29 5 29 12 29 20 22 11 22 11 L10 11 C10 11 3 20 3 12 Z M11 14 C11 14 6 19 6 28 L26 28 C26 19 21 14 21 14 L11 14 Z" /> <circle cx="16" cy="21" r="4" /> </svg>', }, ] }, { type: "link", text: "Pricing", path: { name: "pricing"}, iconRight: '<i class="fa fa-long-arrow-right fa-fw"></i>', }, ], menuOptionsRight: [ { type: "button", text: "Signup", path: { name: "signup" }, class: "button-red" }, { type: "button", text: "Login", path: { name: "login" }, iconRight: '<svg id="i-arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M22 6 L30 16 22 26 M30 16 L2 16" /> </svg>' } ] } } } // ... }
Preview:
Changelog:
v5.0.1 (05/17/2022)
- Update demo build
v5.0 (03/20/2022)
- Upgrade to Vue 3
Download Details:
Author: johndatserakis
Live Demo: https://johndatserakis.github.io/vue-navigation-bar/
Download Link: https://github.com/johndatserakis/vue-navigation-bar/archive/master.zip
Official Website: https://github.com/johndatserakis/vue-navigation-bar
Install & Download:
# Yarn
$ yarn add vue-navigation-bar
# NPM
$ npm install vue-navigation-bar --save