Description:
A dynamic, responsive, mobile-first app navigation UI component for Vue.js 3.
How to use it:
1. Import and register the nav component.
import Nav from "vue-nav-ui";
export default { components: { Nav } }
2. Add the nav component to the app and insert your site logo as follows:
<Nav :navLinks="navLinks" :navConfig="navConfig" :btnConfig="btnConfig"> <img class="img" src="logo" alt="" srcset="" /> </Nav>
3. Define your nav items.
export default { components: { Nav, }, setup() { const navLinks = ref([ { name: "Home", path: "/", }, { name: "Category", path: "/category", }, { name: "Works", path: "/works", }, { name: "About", path: "/about", }, { name: "Contact", path: "/contact", }, ]); const navConfig = ref({ // nav configs here }); const btnConfig = ref({ // button configs here }); return { navLinks, btnConfig, navConfig }; }, };
4. Possible configs to customize the nav & nav button.
const navConfig = ref({ whitespace: true, navBg: "#FAFAFA", navBorderRadius: "30px", linkFont: "Arial", linkColor: "black", responsivePosition: "top", // or "bottom" }); const btnConfig = ref({ btnLink: true, btnUrl: "https://vuescript.com", btnText: "View", btnBg: "#40269E", btnTextColor: "white", btnBorderWidth: "0", btnBorderColor: "black", btnBorderRadius: "20px", });
Preview:
Download Details:
Author: dhanielcodes
Live Demo: https://dhanielcodes.github.io/vue-navigation-ui/
Download Link: https://github.com/dhanielcodes/vue-nav-ui/archive/refs/heads/master.zip
Official Website: https://github.com/dhanielcodes/vue-nav-ui
Install & Download:
# NPM
$ npm i vue-nav-ui