angular4-testing/ng2-admin/docs/contents/articles/015-sidebar/index.md

title	author	sort	group	template
Sidebar	vl	900	Components	article.jade

The sidebar provides a convenient way to navigate the application. Only one sidebar is supported per angular application. This means that the sidebar is basically a singleton object.

The Sidebar can be added to the page using the BaSidebar component:

<ba-sidebar></ba-sidebar>

The sidebar contains a <ba-menu></ba-menu> component which defines and renders the application menu based on routes provided. Generally the ba-menu component can be used separately from ba-sidebar. All menu items information is defined inside the data property of a route.

Menu Configuration

All menu items are located inside the src/app/app.routes.ts file. Each route item can have a menu property under data defining a menu item:

  {
    // first, router configuration
    path: 'dashboard',
    component: Dashboard,
    data: {
      // here additionaly we define how the menu item should look
      menu: {
        title: 'Dashboard', // menu title
        icon: 'ion-android-home', // menu icon
        selected: false, // selected or not
        expanded: false, // expanded or not (if item has children)
        order: 0, // item order in the menu list,
        hidden: true // hide menu item from a list but keep related features (breadcrumbs, page title)
      }
    }
  }

You also can define a list of sub-menu items like this:

  {
    // parent route
    path: 'charts',
    component: Charts,
    data: {
    
      // parent menu configuration
      menu: {
        title: 'Charts',
        icon: 'ion-stats-bars',
        selected: false,
        expanded: false,
        order: 200,
      }
    },
    
    // children routes
    children: [
      {
        path: 'chartist-js',
        component: ChartistJs,
        data: {
        
          // children menu item configuration
          menu: {
            title: 'Chartist.Js',
          }
        }
      }
    ]
  }

Custom menu items

You also can define a menu item not connected to any existing route in the application:

  {
    path: '', // just leave the path empty
    data: {
    
      // and define your menu item
      menu: {
        title: 'External Link', // title
        url: 'http://akveo.com', // custom url
        icon: 'ion-android-exit', // icon
        order: 800, // order
        target: '_blank' // target property of <a> tag (_self, _blank, etc)
      }
    }
  }