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.

<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

<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