Our Nuxt Sidebars are powerful and customisable responsive navigation components for any type of vertical navigation. A Nuxt Sidebar comes with built-in support for branding, navigation, and more. Now keep reading some examples to see how Nuxt Sidebars work.
Example
Nuxt side navbar is a vertical navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.
<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>
<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>
PROP NAME
TYPE
DEFAULT
DESCRIPTION
title
String
Creative Tim
Sidebar title
shortTitle
String
CT
Sidebar short title
logo
String
https://demos.creative-tim.com/nuxt-black-dashboard-pro/img/icon-nuxt.svg
Sidebar app logo
backgroundColor
String
vue
Sidebar background color
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.
SLOTS
DESCRIPTION
default
Content before links
links
Content for links
SLOTS
DESCRIPTION
default
Default content. Usually used to add sub menus
title
Custom title content if you want a custom markup for the sidebar item