# 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
# Sidebar Props
# Sidebar Item Props
# Sidebar Slots
Slot | Description |
---|---|
default | Content before links |
links | Content for 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 |