Sidebar

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

Basic example

• Dashboards

<div class="sidebar-wrapper-docs">
   <side-bar>
        <template slot-scope="props" slot="links">
          <sidebar-item
                    :link="{
                      name: 'Dashboards',
                      icon: 'ni ni-shop text-primary',
                      path: '/dashboard'
                    }"
                  >
          </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

• Dashboards
  • Dashboard
  • Alternative

<div class="sidebar-wrapper-docs">
   <side-bar>
        <template slot-scope="props" 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>        
</div>

Show Code

3 level nested menus

• Dashboards
  • Dashboard
  • Multi Level
    • Third level menu
    • Just another link
    • One last link

<div class="sidebar-wrapper-docs">
   <side-bar>
        <template slot-scope="props" 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: 'Multi Level' }">
              <sidebar-item :link="{ name: 'Third level menu', path:'#' }"/>
              <sidebar-item :link="{ name: 'Just another link', path:'#' }"/>
              <sidebar-item :link="{ name: 'One last link', path:'#' }"/>
            </sidebar-item>
          </sidebar-item>
        </template>
  </side-bar>        
</div>

Show Code

Logo and links below

• Dashboard

---

Documentation

• Getting started

<div class="sidebar-wrapper-docs">
   <side-bar logo="https://www.import.io/wp-content/uploads/2017/10/React-logo-1.png">
        <template slot-scope="props" slot="links">
          <sidebar-item
                  :link="{
                    name: 'Dashboard',
                    icon: 'ni ni-shop text-danger',
                    path: '#',
                    isRoute: false, 
                  }">
                        
          </sidebar-item>
        </template>
        
        <template slot="links-after">
          <hr class="my-3">
          <h6 class="navbar-heading p-0 text-muted">Documentation</h6>
  
          <ul class="navbar-nav mb-md-3">
            <li class="nav-item">
              <a class="nav-link" href="https://demos.creative-tim.com/vue-argon-dashboard-pro/documentation"
                 target="_blank">
                <i class="ni ni-spaceship"></i>
                <span class="nav-link-text">Getting started</span>
              </a>
            </li>
          </ul>
        </template>
  </side-bar>        
</div>

Show Code

Sidebar Props

Sidebar Item Props

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