Responsive Navigation UI Component For Vue 3

Install & Download:

# NPM
$ npm i vue-nav-ui

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: