Responsive Customized Navigation UI Component For Vue 3

Navigation User Interface UI is a dynamic, responsive, and first mobile app navigation component for Vue.js 3.

navigation menu ui design, mobile navigation menu examples, vue js navigation bar example, vue navigation bar, create navigation bar in vue

How to make use of it:

Install and download:

# NPM
$ npm i vue-nav-ui

1. Import and register the navigation component.

import Nav from "vue-nav-ui";

export default {
  components: {
    Nav
  }
}

2. Add the navigation component to the application and enter your site logo as follows:

<Nav :navLinks="navLinks" :navConfig="navConfig" :btnConfig="btnConfig">
  <img class="img" src="logo" alt="" srcset="" />
</Nav>

3. Define your navigation elements.

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 configurations to customize the navigation button and navigation.

const navConfig = ref({
      whitespace: true, 
      navBg: "#FAFAFA", 
      navBorderRadius: "30px",
      linkFont: "Arial", 
      linkColor: "black",
      responsivePosition: "top", // or "bottom"
});
const btnConfig = ref({
      btnLink: true, 
      btnUrl: " ", 
      btnText: "View",
      btnBg: "#40269E", 
      btnTextColor: "white",
      btnBorderWidth: "0", 
      btnBorderColor: "black",
      btnBorderRadius: "20px",
});

Responsive Navigation UI Component, Vue Nav UI Plugin/Github