# Sidebar

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 additionally 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)
          }
        }
      }