Our BootstrapVue Sidebars are powerful and customisable responsive navigation components for any type of vertical navigation. A BootstrapVue Sidebar comes with built-in support for branding, navigation, and more. Now keep reading some examples to see how BootstrapVue Sidebars work.
Example
BootstrapVue side navbar is a vertical navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.
<side-bar>
<template slot= "links" >
<sidebar-item
:link= "{
name: 'Dashboard',
icon: 'ni ni-shop text-primary',
path: '/dashboard'
}" >
</sidebar-item>
<sidebar-item
:link= "{
name: 'Icons',
icon: 'ni ni-planet text-orange',
path: '/icons'
}" >
</sidebar-item>
</template>
</side-bar>
<side-bar>
<template slot= "links" >
<sidebar-item
:link= "{
name: 'Dashboards',
icon: 'ni ni-shop text-primary',
}"
>
<sidebar-item
:link= "{ name: 'Dashboard', path: '/dashboard' }"
></sidebar-item>
<sidebar-item
:link= "{ name: 'Alternative', path: '/alternative' }"
></sidebar-item>
</sidebar-item>
</template>
</side-bar>
Sidebar Props
PROP NAME
TYPE
DEFAULT
DESCRIPTION
title
String
Creative Tim
Sidebar title
shortTitle
String
CT
Sidebar short title
logo
String
https://demos.creative-tim.com/vue-argon-dashboard-pro/img/brand/green.png
Sidebar app logo
backgroundColor
String
vue
Sidebar background color (vue/blue/green/orange/red/primary)
sidebarLinks
Array
[]
List of sidebar links as an array if you don’t want to use components for these.
autoClose
Boolean
true
Whether sidebar should autoclose on mobile when clicking an item
Sidebar Item Props
PROP NAME
TYPE
DEFAULT
DESCRIPTION
menu
Boolean
N/A
Whether the item is a menu. Most of the item it’s not used and should be used only if you want to override the default behavior.
link
Object
{ “name”: “”, “path”: “”, “children”: [] }
Sidebar link. Can contain name, path, icon and other attributes. See examples for more info
Sidebar Slots
SLOT
DESCRIPTION
default
Content before links
links
Content for links
links-after
Content for links below normal links
Sidebar Item Slots
SLOT
DESCRIPTION
default
Default content. Usually used to add sub menus
title
Custom title content if you want a custom markup for the sidebar item