Vue.js 3的动态，响应式，移动优先的应用导航UI组件。

安装和下载：

# NPM
$ npm i vue-nav-ui

如何使用它：

1.导入并注册导航组件。

import Nav from "vue-nav-ui";

export default {
  components: {
    Nav
  }
}

2.将导航组件添加到应用程序中，并插入您的站点徽标，如下所示：

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

3.定义您的导航项。

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.可能的配置以自定义导航和导航按钮。

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

---

官网：https://github.com/dhanielcodes/vue-nav-ui

演示：https://www.vue365.cn/code_demo.php?id=4424

GitHub下载：https://github.com/dhanielcodes/vue-nav-ui/archive/refs/heads/master.zip