diff --git a/docs/contents/articles/051-sidebar/index.md b/docs/contents/articles/051-sidebar/index.md
index 5a82b32b..8a883056 100644
--- a/docs/contents/articles/051-sidebar/index.md
+++ b/docs/contents/articles/051-sidebar/index.md
@@ -11,122 +11,48 @@ Application support only one sidebar per angular application.
 That means sidebar is basically a singletone object.
 Currently sidebar supports level 1 and 2 sub menus.
  
-Sidebar can be created using `baSidebar` directive:
+Sidebar can be added to the page using `BaSidebar` component:
 ```html
 <ba-sidebar></ba-sidebar>
 ```
 
-For now it support only javascript configuration. Though it can be configured manually or via `ui-router` states.
-This methods can be used either together or one at a time.
+At the moment sidebar menu items configuration and Angular 2 Router should be configured independently. We probably will come up with a better solution once new Angular Router is released and stable.
 
 
-## Manual configuration
+## Menu Configuration
 
-For manual configuration you need to use `baSidebarServiceProvider` provider in angular [configuration block](https://docs.angularjs.org/guide/module#configuration-blocks).
-The provider has `addStaticItem` method, which receives menuItem object as an argument, which can have following properties:
+All menu items are located inside `src/app/app.menu.ts` file. The file contain a list of Menu Item objects with the following fields:
 
-<table>
-<thead>
-<tr>
-<td>property</td>
-<td>type</td>
-<td>meaning</td>
-</tr>
-</thead>
-<tbody>
-
-<tr>
-<td>title</td>
-<td>String</td>
-<td>Name of the menu item</td>
-</tr>
-
-<tr>
-<td>icon</td>
-<td>String</td>
-<td>Icon (it's a class name) to be displayed near title</td>
-</tr>
-
-<tr>
-<td>stateRef</td>
-<td>String</td>
-<td>`ui-router` state associated with this menu item</td>
-</tr>
-
-<tr>
-<td>fixedHref</td>
-<td>String</td>
-<td>Url associated with this menu item</td>
-</tr>
-
-<tr>
-<td>blank</td>
-<td>String</td>
-<td>Specifies if following Url should be opened in new browser tab</td>
-</tr>
-
-<tr>
-<td>subMenu</td>
-<td>Array of menu items</td>
-<td>List of menu items to be displayed as next level submenu</td>
-</tr>
-
-</tbody>
-</table>
-
-Sample manual configuration:
 ```javascript
-    baSidebarServiceProvider.addStaticItem({
-      title: 'Menu Level 1',
-      icon: 'ion-ios-more'
-    });
+  {
+    title: 'Dashboard', // menu item title
+    component: 'Dashboard', // component where the menu should lead, has a priority over url property
+    url: 'http://google.com' // manual url address (used only when component is not specified)
+    icon: 'ion-android-home', // icon class
+    target: '_blank', // link target attribute (used only when url is specified)
+    selected: false,  // is item selected
+    expanded: false, // is item expanded (used only when subItems list specified)
+    order: 0 // order in a list
+  }
+```
+You also can define a list of sub-menu items like this:
+```javascript
+  {
+    title: 'Charts',
+    component: 'Charts',
+    icon: 'ion-stats-bars',
+    selected: false,
+    expanded: false,
+    order: 200,
+    subMenu: [  // list of sub-menu items
+      {
+        title: 'Chartist.Js', // sub-item title
+        component: 'ChartistJs'  // sum-item component 
+      },
+    ]
+  }
 ```
 
-## Route configuration
+## Routes configuration
 
-By default sidebar iterates through all **ui-router** states you defined in your application and searches for `sidebarMeta` object in them.
-For each state, which has this property, sidebar element is created. 
-
-States are being grouped hierarchically. 
-That means if there's a parent abstract state for some state and they both have `sidebarMeta` property, it will be displayed as a sub item of that abstract state's menu item.  
-
-Name of the item is taken from `state`'s `title` property. Sample state configuration, which will add an item to sidebar:
-```javascript
-$stateProvider
-        .state('dashboard', {
-          url: '/dashboard',
-          templateUrl: 'app/pages/dashboard/dashboard.html',
-          title: 'Dashboard',
-          sidebarMeta: {
-            icon: 'ion-android-home',
-            order: 0,
-          },
-        });
-```
-
-`sidebarMeta` object can have following properties:
-
-<table>
-<thead>
-<tr>
-<td>property</td>
-<td>type</td>
-<td>meaning</td>
-</tr>
-</thead>
-<tbody>
-
-<tr>
-<td>icon</td>
-<td>String</td>
-<td>Icon (it's a class name) to be displayed near title</td>
-</tr>
-
-<tr>
-<td>order</td>
-<td>Number</td>
-<td>Element's order in current hierarchy</td>
-</tr>
-
-</tbody>
-</table>
\ No newline at end of file
+Routes configuration is specified in the Page Components according to Angular 2 Router specification. More information you can find [here](https://angular.io/docs/ts/latest/guide/router.html).
\ No newline at end of file