Sidebar

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

Basic example

<div class="sidebar-wrapper-docs">
   <side-bar title="Sidebar" short-title="S">
        <template slot-scope="props" slot="links">
          <sidebar-link
            :link="{
              name: 'dashboard',
              icon: 'tim-icons icon-chart-pie-36',
              path: '#'
            }"
          >
        </sidebar-link>
        </template>
  </side-bar>        
</div>

Collapsible menus

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

<div class="sidebar-wrapper-docs">
   <side-bar title="Sidebar" short-title="S">
        <template slot-scope="props" slot="links">
         <sidebar-link :link="{ name: 'Pages', icon: 'tim-icons icon-image-02' }">

         <sidebar-link
           :link="{
             name: 'Pricing',
             path: '#',
             isRoute: false,
           }"/>

           <sidebar-link
              :link="{
                name: 'Components',
                path: '#',
                isRoute: false,
              }"/>

        </sidebar-link>
        </template>
  </side-bar>        
</div>

Color variations

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

          </sidebar-link>
        </template>
  </side-bar>        
</div>

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

          </sidebar-link>
        </template>
  </side-bar>        
</div>

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

          </sidebar-link>
        </template>
  </side-bar>        
</div>

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

          </sidebar-link>
        </template>
  </side-bar>        
</div>

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

          </sidebar-link>
        </template>
  </side-bar>        
</div>
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 link

← Sweet Alert →