Customizable Horizontal Slide Menu For VueJs 2+

Vue Slider is a customizable horizontal slide menu for VueJs 2+.

vue js hamburger menu, vue js sidebar menu, vue js sidebar example, responsive sidebar menu vuejs, vue 3 sidebar menu, vue js menu, vuetify dropdown menu example

Create a Beautiful Mobile App-Like Sliding Menu | mmenu.js

Table of Contents

How to make use of it:

Installation

# NPM
$ npm install @jeremyhamm/vue-slider --save

Usage

import Vue from 'vue'
import Slider from '@jeremyhamm/vue-slider'

Vue.use(Slider)

import Slider from '@jeremyhamm/vue-slider'

export default {
  components: {
    'slider': Slider
  }
}

<slider :width="300" format="push" direction="left" :opacity="0.15" :links="[{'id': 1, 'text': 'Link 1', 'url': 'https://webcodeflow.com'}, {'id': 2, 'text': 'Link 2', 'url': 'https://webcodeflow.com'}]"></slider>

Properties

Name	Type	Default	Options
width	`Number`	`300`	Menu Width `(px)`
format	`String`	`overlay`	`push, full, overlay`
direction	`String`	`left`	`left, right`
opacity	`Number`	`0`	`0.00 - 1.00` Representing css opacity
links	`Array`	null	`[{'id': 1, 'text': 'Link 1', 'url': 'https://github.com'}, {'id': 2, 'text': 'Link 2', 'url': 'https://github.com'}]`
customStyles	`Object`	`{}`	`{'navMenu': {'background-color': 'black'}, 'navIcon': {'color': 'blue'}}`