Really simple animated navigation sidebar with only icons or with icons and text, done with Vuejs.
MIT License
Really simple animated navigation sidebar with only icons or with icons and text, done with Vuejs.
Codesandbox demo - https://codesandbox.io/embed/vue-sidenavbar-demo-3pjye?hidenavigation=1&theme=dark
Live demo - https://vue-sidenavbar-demo.netlify.com/
To run demo locally, run:
git clone https://github.com/pavloskii/vue-sidenavbar.git
cd vue-sidenavbar
npm i
npm run demo
Then open localhost:8080
npm install vue-sidenavbar --save
Plugin install:
import Vue from "vue";
import VueSidenavbar from "vue-sidenavbar";
Vue.use(VueSidenavbar);
OR just import the components where you want to use them:
import { VueSidenavbar, VueSidenavbarItem } from "vue-sidenavbar";
export default {
components: {
VueSidenavbar,
VueSidenavbarItem
}
};
In your template:
<template>
<VueSidenavbar>
<VueSidenavbarItem label="HOME" icon="fas fa-home" to="/home" />
<VueSidenavbarItem
label="PROFILE"
icon="fas fa-address-card"
to="/profile"
/>
<VueSidenavbarItem
label="LOGOUT"
icon="fas fa-sign-out-alt"
tag="a"
@click="someFunction"
/>
</VueSidenavbar>
</template>
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) |
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>
You can easily configure the sidenav's colours by using the css variables below:
:root {
--sidebaritem-bgcolor: #461220;
--sidebaritem-hover-bgcolor: #8c2f39;
--burger-color: gray;
--burger-bgcolor: red;
--burger-hover-bgcolor: pink;
}