BootstrapVue Sidebar

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.

Copy

<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>

Collapsible menus Pro

Copy

<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