diff --git a/src/framework/theme/components/menu/menu-item.component.html b/src/framework/theme/components/menu/menu-item.component.html
index f048dad60a..f948bf06c3 100644
--- a/src/framework/theme/components/menu/menu-item.component.html
+++ b/src/framework/theme/components/menu/menu-item.component.html
@@ -47,8 +47,8 @@
 <ul *ngIf="menuItem.children"
     [class.collapsed]="!(menuItem.children && menuItem.expanded)"
     [class.expanded]="menuItem.expanded"
-    class="menu-items"
-    [style.max-height.px]="maxHeight">
+    [@toggle]="toggleState"
+    class="menu-items">
   <ng-container *ngFor="let item of menuItem.children">
     <li nbMenuItem *ngIf="!item.hidden"
         [menuItem]="item"
diff --git a/src/framework/theme/components/menu/menu.component.scss b/src/framework/theme/components/menu/menu.component.scss
index e9e9635e3b..d10a48759c 100644
--- a/src/framework/theme/components/menu/menu.component.scss
+++ b/src/framework/theme/components/menu/menu.component.scss
@@ -13,7 +13,6 @@
   .menu-item > .menu-items {
     list-style-type: none;
     overflow: hidden;
-    transition: max-height 0.3s ease-in;
   }
 
   .menu-item a {
diff --git a/src/framework/theme/components/menu/menu.component.ts b/src/framework/theme/components/menu/menu.component.ts
index c124a10057..5f87f37b2f 100644
--- a/src/framework/theme/components/menu/menu.component.ts
+++ b/src/framework/theme/components/menu/menu.component.ts
@@ -12,35 +12,35 @@ import {
   OnInit,
   OnDestroy,
   HostBinding,
-  ViewChildren,
-  QueryList,
-  ElementRef,
   AfterViewInit,
-  PLATFORM_ID,
   Inject,
-  ChangeDetectorRef,
+  DoCheck,
 } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
 import { Router, NavigationEnd } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
-import { takeWhile, filter } from 'rxjs/operators';
-
-import { NbMenuInternalService, NbMenuItem, NbMenuService, NbMenuBag } from './menu.service';
-import { convertToBoolProperty, getElementHeight } from '../helpers';
+import { takeWhile, filter, map } from 'rxjs/operators';
+import { NbMenuInternalService, NbMenuItem, NbMenuBag, NbMenuService } from './menu.service';
+import { convertToBoolProperty } from '../helpers';
 import { NB_WINDOW } from '../../theme.options';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 
-function sumSubmenuHeight(item: NbMenuItem) {
-  return item.expanded
-    ? (item.subMenuHeight || 0) + item.children.filter(c => c.children).reduce((acc, c) => acc + sumSubmenuHeight(c), 0)
-    : 0;
+export enum NbToggleStates {
+  Expanded = 'expanded',
+  Collapsed = 'collapsed',
 }
 
 @Component({
-  // tslint:disable-next-line:component-selector
   selector: '[nbMenuItem]',
   templateUrl: './menu-item.component.html',
+  animations: [
+    trigger('toggle', [
+      state(NbToggleStates.Collapsed, style({ height: '0' })),
+      state(NbToggleStates.Expanded, style({ height: '*' })),
+      transition(`${NbToggleStates.Collapsed} <=> ${NbToggleStates.Expanded}`, animate(300)),
+    ]),
+  ],
 })
-export class NbMenuItemComponent implements AfterViewInit, OnDestroy {
+export class NbMenuItemComponent implements DoCheck, AfterViewInit, OnDestroy {
   @Input() menuItem = <NbMenuItem>null;
 
   @Output() hoverItem = new EventEmitter<any>();
@@ -48,51 +48,29 @@ export class NbMenuItemComponent implements AfterViewInit, OnDestroy {
   @Output() selectItem = new EventEmitter<any>();
   @Output() itemClick = new EventEmitter<any>();
 
-  private alive: boolean = true;
+  private alive = true;
+  toggleState: NbToggleStates;
 
-  @ViewChildren(NbMenuItemComponent, { read: ElementRef }) subMenu: QueryList<ElementRef>;
-  maxHeight: number = 0;
+  constructor(private menuService: NbMenuService) {}
 
-  constructor(
-    private menuService: NbMenuService,
-    @Inject(PLATFORM_ID) private platformId: Object,
-    private changeDetection: ChangeDetectorRef,
-  ) { }
+  ngDoCheck() {
+    this.toggleState = this.menuItem.expanded ? NbToggleStates.Expanded : NbToggleStates.Collapsed;
+  }
 
   ngAfterViewInit() {
-    this.subMenu.changes
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(() => {
-        this.updateSubmenuHeight();
-        this.updateMaxHeight();
-      });
-
     this.menuService.onSubmenuToggle()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(() => this.updateMaxHeight());
-
-    this.updateSubmenuHeight();
-    this.updateMaxHeight();
-    this.changeDetection.detectChanges();
+      .pipe(
+        takeWhile(() => this.alive),
+        filter(({ item }) => item === this.menuItem),
+        map(({ item }: NbMenuBag) => item.expanded),
+      )
+      .subscribe(isExpanded => this.toggleState = isExpanded ? NbToggleStates.Expanded : NbToggleStates.Collapsed);
   }
 
   ngOnDestroy() {
     this.alive = false;
   }
 
-  updateSubmenuHeight() {
-    if (isPlatformBrowser(this.platformId)) {
-      this.menuItem.subMenuHeight = this.subMenu.reduce(
-        (acc, c) => acc + getElementHeight(c.nativeElement),
-        0,
-      );
-    }
-  }
-
-  updateMaxHeight() {
-    this.maxHeight = sumSubmenuHeight(this.menuItem);
-  }
-
   onToggleSubMenu(item: NbMenuItem) {
     this.toggleSubMenu.emit(item);
   }
@@ -235,6 +213,8 @@ export class NbMenuComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnInit() {
+    this.menuInternalService.prepareItems(this.items);
+
     this.menuInternalService
       .onAddItem()
       .pipe(
@@ -267,9 +247,7 @@ export class NbMenuComponent implements OnInit, AfterViewInit, OnDestroy {
         takeWhile(() => this.alive),
         filter((data: { tag: string }) => this.compareTag(data.tag)),
       )
-      .subscribe((data: { tag: string }) => {
-        this.collapseAll();
-      });
+      .subscribe(() => this.collapseAll());
 
     this.router.events
       .pipe(
@@ -277,24 +255,19 @@ export class NbMenuComponent implements OnInit, AfterViewInit, OnDestroy {
         filter(event => event instanceof NavigationEnd),
       )
       .subscribe(() => {
-        this.menuInternalService.resetItems(this.items);
-        this.menuInternalService.updateSelection(this.items, this.tag, this.autoCollapseValue)
+        this.menuInternalService.selectFromUrl(this.items, this.tag, this.autoCollapseValue);
       });
-
-    // TODO: this probably won't work if you pass items dynamically into items input
-    this.menuInternalService.prepareItems(this.items);
-    this.items.push(...this.menuInternalService.getItems());
   }
 
   ngAfterViewInit() {
-    setTimeout(() => this.menuInternalService.updateSelection(this.items, this.tag));
+    setTimeout(() => this.menuInternalService.selectFromUrl(this.items, this.tag, this.autoCollapseValue));
   }
 
   onAddItem(data: { tag: string; items: NbMenuItem[] }) {
     this.items.push(...data.items);
 
     this.menuInternalService.prepareItems(this.items);
-    this.menuInternalService.updateSelection(this.items, this.tag, this.autoCollapseValue);
+    this.menuInternalService.selectFromUrl(this.items, this.tag, this.autoCollapseValue);
   }
 
   onHoverItem(item: NbMenuItem) {
@@ -311,8 +284,7 @@ export class NbMenuComponent implements OnInit, AfterViewInit, OnDestroy {
 
   // TODO: is not fired on page reload
   onSelectItem(item: NbMenuItem) {
-    this.menuInternalService.resetItems(this.items);
-    this.menuInternalService.selectItem(item, this.tag);
+    this.menuInternalService.selectItem(item, this.items, this.autoCollapseValue, this.tag);
   }
 
   onItemClick(item: NbMenuItem) {
diff --git a/src/framework/theme/components/menu/menu.service.ts b/src/framework/theme/components/menu/menu.service.ts
index 6d815cce33..2704c207b1 100644
--- a/src/framework/theme/components/menu/menu.service.ts
+++ b/src/framework/theme/components/menu/menu.service.ts
@@ -10,6 +10,7 @@ import { Params } from '@angular/router';
 import { Observable, BehaviorSubject, ReplaySubject } from 'rxjs';
 import { share } from 'rxjs/operators';
 import { isUrlPathContain, isUrlPathEqual } from './url-matching-helpers';
+
 export interface NbMenuBag { tag: string; item: NbMenuItem }
 
 const itemClick$ = new ReplaySubject<NbMenuBag>(1);
@@ -95,6 +96,27 @@ export class NbMenuItem {
   selected?: boolean;
   data?: any;
   fragment?: string;
+
+  /**
+   * @returns item parents in top-down order
+   */
+  static getParents(item: NbMenuItem): NbMenuItem[] {
+    const parents = [];
+
+    let parent = item.parent;
+    while (parent) {
+      parents.unshift(parent);
+      parent = parent.parent;
+    }
+
+    return parents;
+  }
+
+  static isParent(item: NbMenuItem, possibleChild: NbMenuItem): boolean {
+    return possibleChild.parent
+      ? possibleChild.parent === item || this.isParent(item, possibleChild.parent)
+      : false;
+  }
 }
 
 // TODO: map select events to router change events
@@ -162,15 +184,8 @@ export class NbMenuService {
 
 @Injectable()
 export class NbMenuInternalService {
-  private items: NbMenuItem[] = [];
-
-  constructor(private location: Location) {
-    this.items = [];
-  }
 
-  getItems(): NbMenuItem[] {
-    return this.items;
-  }
+  constructor(private location: Location) {}
 
   prepareItems(items: NbMenuItem[]) {
     const defaultItem = new NbMenuItem();
@@ -180,19 +195,56 @@ export class NbMenuInternalService {
     });
   }
 
-  updateSelection(items: NbMenuItem[], tag: string, collapseOther: boolean = false) {
-    if (collapseOther) {
-      this.collapseAll(items, tag);
+  selectFromUrl(items: NbMenuItem[], tag: string, collapseOther: boolean = false) {
+    const selectedItem = this.findItemByUrl(items);
+    if (selectedItem) {
+      this.selectItem(selectedItem, items, collapseOther, tag);
     }
-    items.forEach(item => this.selectItemByUrl(item, tag));
   }
 
-  resetItems(items: NbMenuItem[]) {
-    items.forEach(i => this.resetItem(i));
+  selectItem(item: NbMenuItem, items: NbMenuItem[], collapseOther: boolean = false, tag: string) {
+    const unselectedItems = this.resetSelection(items);
+    const collapsedItems = collapseOther ? this.collapseItems(items) : [];
+
+    for (const parent of NbMenuItem.getParents(item)) {
+      parent.selected = true;
+      // emit event only for items that weren't selected before ('unselectedItems' contains items that were selected)
+      if (!unselectedItems.includes(parent)) {
+        this.itemSelect(parent, tag);
+      }
+
+      const wasNotExpanded = !parent.expanded;
+      parent.expanded = true;
+      const i = collapsedItems.indexOf(parent);
+      // emit event only for items that weren't expanded before.
+      // 'collapsedItems' contains items that were expanded, so no need to emit event.
+      // in case 'collapseOther' is false, 'collapsedItems' will be empty,
+      // so also check if item isn't expanded already ('wasNotExpanded').
+      if (i === -1 && wasNotExpanded) {
+        this.submenuToggle(parent, tag);
+      } else {
+        collapsedItems.splice(i, 1);
+      }
+    }
+
+    item.selected = true;
+    // emit event only for items that weren't selected before ('unselectedItems' contains items that were selected)
+    if (!unselectedItems.includes(item)) {
+      this.itemSelect(item, tag);
+    }
+
+    // remaining items which wasn't expanded back after expanding all currently selected items
+    for (const collapsedItem of collapsedItems) {
+      this.submenuToggle(collapsedItem, tag);
+    }
   }
 
   collapseAll(items: NbMenuItem[], tag: string, except?: NbMenuItem) {
-    items.forEach(i => this.collapseItem(i, tag, except));
+    const collapsedItems = this.collapseItems(items, except);
+
+    for (const item of collapsedItems) {
+      this.submenuToggle(item, tag);
+    }
   }
 
   onAddItem(): Observable<{ tag: string; items: NbMenuItem[] }> {
@@ -227,32 +279,53 @@ export class NbMenuInternalService {
     itemClick$.next({tag, item});
   }
 
-  private resetItem(item: NbMenuItem) {
-    item.selected = false;
-
-    item.children && item.children.forEach(child => {
-      this.resetItem(child);
-    });
-  }
+  /**
+   * Unselect all given items deeply.
+   * @param items array of items to unselect.
+   * @returns items which selected value was changed.
+   */
+  private resetSelection(items: NbMenuItem[]): NbMenuItem[] {
+    const unselectedItems = [];
+
+    for (const item of items) {
+      if (item.selected) {
+        unselectedItems.push(item);
+      }
+      item.selected = false;
+
+      if (item.children) {
+        unselectedItems.push(...this.resetSelection(item.children));
+      }
+    }
 
-  private isParent(parent, child) {
-    return child.parent
-      ? child.parent === parent || this.isParent(parent, child.parent)
-      : false;
+    return unselectedItems;
   }
 
-  private collapseItem(item: NbMenuItem, tag: string, except?: NbMenuItem) {
-    if (except && (item === except || this.isParent(item, except))) {
-      return;
-    }
-
-    const wasExpanded = item.expanded;
-    item.expanded = false;
-    if (wasExpanded) {
-      this.submenuToggle(item);
+  /**
+   * Collapse all given items deeply.
+   * @param items array of items to collapse.
+   * @param except menu item which shouldn't be collapsed, also disables collapsing for parents of this item.
+   * @returns items which expanded value was changed.
+   */
+  private collapseItems(items: NbMenuItem[], except?: NbMenuItem): NbMenuItem[] {
+    const collapsedItems = [];
+
+    for (const item of items) {
+      if (except && (item === except || NbMenuItem.isParent(item, except))) {
+        continue;
+      }
+
+      if (item.expanded) {
+        collapsedItems.push(item)
+      }
+      item.expanded = false;
+
+      if (item.children) {
+        collapsedItems.push(...this.collapseItems(item.children));
+      }
     }
 
-    item.children && item.children.forEach(child => this.collapseItem(child, tag));
+    return collapsedItems;
   }
 
   private applyDefaults(item, defaultItem) {
@@ -260,7 +333,7 @@ export class NbMenuInternalService {
     Object.assign(item, defaultItem, menuItem);
     item.children && item.children.forEach(child => {
       this.applyDefaults(child, defaultItem);
-    })
+    });
   }
 
   private setParent(item: NbMenuItem) {
@@ -270,38 +343,29 @@ export class NbMenuInternalService {
     });
   }
 
-  selectItem(item: NbMenuItem, tag: string) {
-    item.selected = true;
-    this.itemSelect(item, tag);
-    this.selectParent(item, tag);
-  }
-
-  private selectParent({ parent: item }: NbMenuItem, tag: string) {
-    if (!item) {
-      return;
-    }
-
-    if (!item.expanded) {
-      item.expanded = true;
-      this.submenuToggle(item, tag);
-    }
-
-    item.selected = true;
-    this.selectParent(item, tag);
-  }
+  /**
+   * Find deepest item which link matches current URL path.
+   * @param items array of items to search in.
+   * @returns found item of undefined.
+   */
+  private findItemByUrl(items: NbMenuItem[]): NbMenuItem | undefined {
+    let selectedItem;
+
+    items.some(item => {
+      if (item.children) {
+        selectedItem = this.findItemByUrl(item.children);
+      }
+      if (!selectedItem && this.isSelectedInUrl(item)) {
+        selectedItem = item;
+      }
+
+      return selectedItem;
+    });
 
-  private selectItemByUrl(item: NbMenuItem, tag: string) {
-    const wasSelected = item.selected;
-    const isSelected = this.selectedInUrl(item);
-    if (!wasSelected && isSelected) {
-      this.selectItem(item, tag);
-    }
-    if (item.children) {
-      this.updateSelection(item.children, tag);
-    }
+    return selectedItem;
   }
 
-  private selectedInUrl(item: NbMenuItem): boolean {
+  private isSelectedInUrl(item: NbMenuItem): boolean {
     const exact: boolean = item.pathMatch === 'full';
     return exact
       ? isUrlPathEqual(this.location.path(), item.link)
diff --git a/src/playground/menu/menu-test.component.ts b/src/playground/menu/menu-test.component.ts
index 401dd21d12..af7da7dee3 100644
--- a/src/playground/menu/menu-test.component.ts
+++ b/src/playground/menu/menu-test.component.ts
@@ -85,12 +85,12 @@ export class NbMenuItem4Component { }
   template: `
     <nb-layout>
       <nb-sidebar state="compacted">
-        <nb-menu id="menu-sidebar" tag="sidebarMenu" [items]="menuItems"></nb-menu>
+        <nb-menu id="menu-sidebar" tag="sidebarMenu" [items]="sidebarMenuItems"></nb-menu>
       </nb-sidebar>
       <nb-layout-column>
         <nb-card size="xxlarge">
           <nb-card-body>
-            <nb-menu id="menu-first" tag="firstMenu" [items]="menuItems" [autoCollapse]="true"></nb-menu>
+            <nb-menu id="menu-first" tag="firstMenu" [items]="firstMenuItems" [autoCollapse]="true"></nb-menu>
             <router-outlet></router-outlet>
             <button nbButton id="addBtn" (click)="addMenuItem()">Add</button>
             <button nbButton id="homeBtn" (click)="navigateHome()">Home</button>
@@ -98,7 +98,7 @@ export class NbMenuItem4Component { }
         </nb-card>
         <nb-card size="xxlarge">
           <nb-card-body>
-            <nb-menu id="menu-second" tag="SecondMenu" [items]="menuItems1"></nb-menu>
+            <nb-menu id="menu-second" tag="SecondMenu" [items]="secondMenuItems"></nb-menu>
             <router-outlet></router-outlet>
             <button nbButton id="addBtn" (click)="addMenuItem()">Add</button>
             <button nbButton id="homeBtn" (click)="navigateHome()">Home</button>
@@ -106,7 +106,7 @@ export class NbMenuItem4Component { }
         </nb-card>
         <nb-card size="xxlarge">
           <nb-card-body>
-            <nb-menu id="menu-third" tag="thirdMenu" [items]="menuItems2"></nb-menu>
+            <nb-menu id="menu-third" tag="thirdMenu" [items]="thirdMenuItems"></nb-menu>
           </nb-card-body>
         </nb-card>
       </nb-layout-column>
@@ -114,7 +114,61 @@ export class NbMenuItem4Component { }
   `,
 })
 export class NbMenuTestComponent implements OnInit, OnDestroy {
-  menuItems = [
+  sidebarMenuItems = [
+    {
+      title: 'Menu Items',
+      group: true,
+      icon: 'nb-keypad',
+    },
+    {
+      title: 'Menu #1',
+      link: '/menu/menu-test.component/1',
+      icon: 'nb-keypad',
+      queryParams: { param: 1 },
+      fragment: '#fragment',
+    },
+    {
+      title: 'Menu #2',
+      link: '/menu/menu-test.component/2',
+      icon: 'nb-keypad',
+    },
+    {
+      title: 'Menu #3',
+      icon: 'nb-keypad',
+      children: [
+        {
+          title: 'Menu #3.1',
+          link: '/menu/menu-test.component/3/1',
+        },
+        {
+          title: 'Menu #3.2',
+          link: '/menu/menu-test.component/3/2',
+        },
+        {
+          title: 'Menu #3.3',
+          children: [
+            {
+              title: 'Menu #3.3.1',
+              link: '/menu/menu-test.component/3/3/1',
+            },
+            {
+              title: 'Menu #3.3.2',
+              link: '/menu/menu-test.component/3/3/2',
+              queryParams: { param: 2 },
+              fragment: '#fragment',
+              home: true,
+            },
+            {
+              title: '@nebular/theme',
+              target: '_blank',
+              url: 'https://github.com/akveo/ng2-admin',
+            },
+          ],
+        },
+      ],
+    },
+  ];
+  firstMenuItems = [
     {
       title: 'Menu Items',
       group: true,
@@ -133,7 +187,7 @@ export class NbMenuTestComponent implements OnInit, OnDestroy {
       icon: 'nb-keypad',
     },
   ];
-  menuItems1 = [
+  secondMenuItems = [
     {
       title: 'Menu items with fragments ',
       group: true,
@@ -156,7 +210,7 @@ export class NbMenuTestComponent implements OnInit, OnDestroy {
       icon: 'nb-keypad',
     },
   ];
-  menuItems2 = [
+  thirdMenuItems = [
     {
       title: 'Menu #1',
     },