10 Vue Navigation Component for Vue.js Application

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.

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

vue-tree-nav

View Demo

Download Source

2. vue-navigation-bar

A simple, pretty navbar for your Vue projects. (A work in progress for a few more days maybe) .

vue-navigation-bar

View Demo

Download Source

3. vue-component-boilerplate

A Vue.js component to toggle navigation drawer menu container.

vue-component-boilerplate

View Demo

Download Source

4. Navigation tree menu component with nice integration with vue-router

Navigation tree menu component with nice integration with vue-router.

This is image title

View Demo

Download Source

5. vue-quick-menu

This is web navigation component base on vue2.0+. It can be used in both PC and mobile.

vue-quick-menu

View Demo

Download Source

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.

Liquor Tree

View Demo

Download Source

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.

vs-crumbs

View Demo

8. vue-side-nav

for the best user-experience when navigating your side, you can use a responsive side-nav.

vue-side-nav

View Demo

Download Source

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.

vue-navigation

View Demo

Download Source

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.

vue-breadcrumbs

View Demo

Download Source

I hope you like them!

vue-js vue-navigation vavigation-component vue

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

10 Best Vue Icon Component For Your Vue.js App

In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Markdown is a way to style text on the web. The 10 Vue markdown components below will give you a clear view.

Collection of 15 Vue Input Component for Your Vue.js App

Vue input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. In this article I will share 15 Vue input components to you.

Collection of 14 Vue Select Component for Vue.js App

Vue select component can handle multiple selections. It's enabled with the multiple property. Like with the single selection, you can pull out the new value by accessing event. target. value in the onChange callback.

Collection of 7 Vue Popup Component for Vue.js App

Popup Vue component represents Popup component. Here is a summary of 7 Vue popup components for you to choose.