10 Vue Navigation Component for Vue.js Application
Vue Navigation is the act of moving between screens of an app to complete tasks. It’s enabled through several means: dedicated navigation components, embedding navigation behavior into content, and platform affordances.
In this article I will introduce you 10 Vue navigation that you can choose
1. vue-tree-nav
Navigation tree menu component with nice integration with vue-router.
- Ready out of the box!
- Side bar with infinite depth
- Links and dropdows with infinite depth on both right and left side
- Font Awesome icons
- Css transitions
- Beautiful themes to choose
- Complete customizable
2. vue-navigation-bar
A simple, pretty navbar for your Vue projects. (A work in progress for a few more days maybe) .
3. vue-component-boilerplate
A Vue.js component to toggle navigation drawer menu container.
4. Navigation tree menu component with nice integration with vue-router
Navigation tree menu component with nice integration with vue-router.
5. vue-quick-menu
This is web navigation component base on vue2.0+. It can be used in both PC and mobile.
6. Liquor Tree
A Vue tree component that allows you to present hierarchically organized data in a nice and logical manner.
supports mobile, and has a variety of response events. Flexible configuration options, and support for keyboard navigation.
7. vs-crumbs
Works with multi-level paths without the need for child views. For example: “/foo/bar” and “/foo/boo” or even “/foo/:id” can all be used at the same level with a single router-view. Supports child views too.
8. vue-side-nav
for the best user-experience when navigating your side, you can use a responsive side-nav.
9. vue-navigation
A page navigation library, record routes and cache pages, like native app navigation.
vue-navigation default behavior is similar to native mobile app (A、B、C are pages):
A forward to B, then forward to C;
C back to B, B will recover from cache;
B forward to C again, C will rebuild, not recover from cache;
C forward to A, A will build, now the route contains two A instance.
!important: vue-navigation adds a key to the url to distinguish the route. The default name of the key is VNK, which can be modified.
10. vue-breadcrumbs
Vue breadcrumbs builds on the official vue-router package to provide simple breadcrumbs. This package is backwards compatible to support both Vue 1.x and Vue 2.x.
I hope you like them!
#vue-js #vue-navigation #vavigation-component #vue
