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