Really simple animated navigation sidebar with only icons or with icons and text, done with Vuejs.
Demo
Codesandbox demo - https://codesandbox.io/embed/vue-sidenavbar-demo-3pjye?hidenavigation=1&theme=dark
To run demo locally, run:
npm i
npm run demo
Then open localhost:8080
Installation
npm install vue-sidenavbar --save
Usage
Plugin install:
;; Vue;
OR just import the components where you want to use them:
; components: VueSidenavbar VueSidenavbarItem ;
In your template:
Props
VueSidenavbar: no props.
VueSidenavbarItem:
name | type | default | description |
---|---|---|---|
tag | String | router-link | The template tag of the nav item (inherits all other attributes) |
label | String | The text under the icon (not required) | |
icon | String | The name of the icon (goes into class attribute of i)(not required) |
Slots
VueSidenavbar:
name | description |
---|---|
default | Componet content |
usage:
<VueSidenavbar> <VueSidenavbarItem label="HOME" icon="fas fa-home" tag="a" /></VueSidenavbar>
VueSidenavbar:
name | description |
---|---|
default | Use only if you want to create custom nav item, else it has default content, that work with the props |
usage:
<VueSidenavbar> <VueSidenavbarItem label="HOME" icon="fas fa-home" to="/home"/> <VueSidenavbarItem> <a href="/home" class="sidenav__link"><i class="fas fa-home"></i><span>Home</span></a> </VueSidenavbarItem></VueSidenavbar>
Colour variables
You can easily configure the sidenav's colours by using the css variables below: