Nuxt Sidebar

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.

Copy
<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>

Collapsible menus Pro

Copy
<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