# Sidebar

We've created a custom Sidebar plugin that let's you dynamically specify it's content through SidebarItem components

# Basic example

<div class="sidebar-wrapper-docs">
   <side-bar title="Sidebar" short-title="S" background-color="vue">
        <template slot-scope="props" slot="links">
          <sidebar-item
                  :link="{
                    name: 'Dashboard',
                    icon: 'tim-icons icon-chart-pie-36',
                    path: '#',
                    isRoute: false, 
                  }">
                        
          </sidebar-item>
        </template>
  </side-bar>        
</div>
Show Code

# Collapsible menus

You can define sidebar menus with items inside simply by using a sidebar-item inside another sidebar-item

<div class="sidebar-wrapper-docs">
   <side-bar title="Sidebar" short-title="S" background-color="vue">
        <template slot-scope="props" slot="links">
         <sidebar-item :link="{ name: 'Pages', icon: 'tim-icons icon-image-02' }">
                   
         <sidebar-item
           :link="{
             name: 'Pricing',
             path: '#',
             isRoute: false, 
           }"/>
          
           <sidebar-item
              :link="{
                name: 'Components',
                path: '#',
                isRoute: false, 
              }"/>
                    
        </sidebar-item>
        </template>
  </side-bar>        
</div>
Show Code

# Color variations

<div class="sidebar-wrapper-docs">
   <side-bar title="Sidebar" short-title="S" background-color="blue">
        <template slot-scope="props" slot="links">
          <sidebar-item
                  :link="{
                    name: 'Dashboard',
                    icon: 'tim-icons icon-chart-pie-36',
                    path: '#',
                    isRoute: false, 
                  }">
                        
          </sidebar-item>
        </template>
  </side-bar>        
</div>
Show Code
<div class="sidebar-wrapper-docs">
   <side-bar title="Sidebar" short-title="S" background-color="green">
        <template slot-scope="props" slot="links">
          <sidebar-item
                  :link="{
                    name: 'Dashboard',
                    icon: 'tim-icons icon-chart-pie-36',
                    path: '#',
                    isRoute: false, 
                  }">
                        
          </sidebar-item>
        </template>
  </side-bar>        
</div>
Show Code
<div class="sidebar-wrapper-docs">
   <side-bar title="Sidebar" short-title="S" background-color="orange">
        <template slot-scope="props" slot="links">
          <sidebar-item
                  :link="{
                    name: 'Dashboard',
                    icon: 'tim-icons icon-chart-pie-36',
                    path: '#',
                    isRoute: false, 
                  }">
                        
          </sidebar-item>
        </template>
  </side-bar>        
</div>
Show Code
<div class="sidebar-wrapper-docs">
   <side-bar title="Sidebar" short-title="S" background-color="red">
        <template slot-scope="props" slot="links">
          <sidebar-item
                  :link="{
                    name: 'Dashboard',
                    icon: 'tim-icons icon-chart-pie-36',
                    path: '#',
                    isRoute: false, 
                  }">
                        
          </sidebar-item>
        </template>
  </side-bar>        
</div>
Show Code
<div class="sidebar-wrapper-docs">
   <side-bar title="Sidebar" short-title="S" background-color="primary">
        <template slot-scope="props" slot="links">
          <sidebar-item
                  :link="{
                    name: 'Dashboard',
                    icon: 'tim-icons icon-chart-pie-36',
                    path: '#',
                    isRoute: false, 
                  }">
                        
          </sidebar-item>
        </template>
  </side-bar>        
</div>
Show Code
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-black-dashboard-pro/img/icon-vue.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
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
Slot Description
default Content before links
links Content for links
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

← Sliders →