vue-ultra-sidenav

Implement a customizable sidenav component.

Install

npm install --save vue-ultra-sidenav

Import components

import {
  Sidenav,
  SidenavLink,
  SidenavOption,
  SidenavGroup
} from 'vue-ultra-sidenav';

Basic usage

A propertie can define if sidenav is open or not. When Close button or backdrop (is used) is clicked then close event is emitted.

<template>
  <sidenav
    :is-open="isOpenSidenav"
    @close="closeSidenav"
  >
    <sidenav-group title="Info Group">
      <sidenav-option
        @click="$router.push('/')"
      >
        Go Home
      </sidenav-option>
    </sidenav-group>

    <sidenav-group title="Links">
      <sidenav-link
        :url="'https://google.com'"
        :target="'blank'"
      >
        Google
      </sidenav-link>
      <sidenav-link
        :url="'https://github.com'"
        :target="'blank'"
      >
        Github
      </sidenav-link>
    </sidenav-group>
  </sidenav>
</template>

<script>
export default {
  name: 'sidenav',
  data() {
    return {
      isOpenSidenav: true
    };
  },
  methods: {
    closeSidenav() {
      this.isOpenSidenav = false;
    }
  }
};
</script>

Props and events definition

Sidenav

Prop	Type	Default	Description
isOpen	boolean	false	Defines if sidenav is open or not
backdrop	boolean	true	Defines if backdrop is used or not
transition	string (Name of css transition)	fade (Defined on internal css)	Set css animation to open and close event
closeIcon	string (Path to proyect image)	null (Internal icon is used)	Send icon to use on close button
fixLeft	boolean	true	Fix to ledt side

Contribution

All pull requests and suggestions are welcome.