diff --git a/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-condensed-example/side-navigation-condensed-example.component.html b/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-condensed-example/side-navigation-condensed-example.component.html
index 8d7f0d3c83a..bbde85edee7 100644
--- a/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-condensed-example/side-navigation-condensed-example.component.html
+++ b/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-condensed-example/side-navigation-condensed-example.component.html
@@ -15,10 +15,13 @@
             </li>
             <li fd-nested-list-item>
                 <fd-nested-list-popover>
-                    <a fd-nested-list-link>
-                        <span fd-nested-list-icon [glyph]="'settings'"></span>
-                        <span fd-nested-list-title>Link 3</span>
-                    </a>
+                    <div fd-nested-list-content [selected]="true">
+                        <a fd-nested-list-link>
+                            <span fd-nested-list-icon [glyph]="'settings'"></span>
+                            <span fd-nested-list-title>Link 3</span>
+                        </a>
+                        <button fd-nested-list-expand-icon></button>
+                    </div>
                     <ul fd-nested-list>
                         <li fd-nested-list-item>
                             <a fd-nested-list-link>
diff --git a/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-icons-example.component.html b/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-icons-example.component.html
index 6ccbaf0ad13..c074087dae1 100644
--- a/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-icons-example.component.html
+++ b/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-icons-example.component.html
@@ -14,10 +14,13 @@
                 </a>
             </li>
             <li fd-nested-list-item>
-                <a fd-nested-list-link>
-                    <span fd-nested-list-icon [glyph]="'settings'"></span>
-                    <span fd-nested-list-title>Link 3</span>
-                </a>
+                <div fd-nested-list-content>
+                    <a fd-nested-list-link>
+                        <span fd-nested-list-icon [glyph]="'settings'"></span>
+                        <span fd-nested-list-title>Link 3</span>
+                    </a>
+                    <button fd-nested-list-expand-icon></button>
+                </div>
                 <ul fd-nested-list [textOnly]="true">
                     <li fd-nested-list-item>
                         <a fd-nested-list-link>
diff --git a/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-multiple-selected-example/side-navigation-multiple-selected-example.component.html b/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-multiple-selected-example/side-navigation-multiple-selected-example.component.html
index 98de27fb38d..6d211d4226d 100644
--- a/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-multiple-selected-example/side-navigation-multiple-selected-example.component.html
+++ b/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-multiple-selected-example/side-navigation-multiple-selected-example.component.html
@@ -12,9 +12,12 @@
                 </a>
             </li>
             <li fd-nested-list-item [expanded]="true">
-                <a fd-nested-list-link>
-                    <span fd-nested-list-title>Link 3</span>
-                </a>
+                <div fd-nested-list-content>
+                    <a fd-nested-list-link>
+                        <span fd-nested-list-title>Link 1</span>
+                    </a>
+                    <button fd-nested-list-expand-icon></button>
+                </div>
                 <ul fd-nested-list>
                     <li fd-nested-list-item>
                         <a fd-nested-list-link>
diff --git a/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-non-selectable-example/side-navigation-non-selectable-example.component.html b/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-non-selectable-example/side-navigation-non-selectable-example.component.html
new file mode 100644
index 00000000000..445bc7a213d
--- /dev/null
+++ b/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-non-selectable-example/side-navigation-non-selectable-example.component.html
@@ -0,0 +1,41 @@
+<fd-side-nav [selectable]="false">
+    <div fd-side-nav-main>
+        <ul fd-nested-list [textOnly]="true">
+            <li fd-nested-list-item>
+                <a fd-nested-list-link>
+                    <span fd-nested-list-title>Link 1</span>
+                </a>
+            </li>
+            <li fd-nested-list-item>
+                <a fd-nested-list-link [selected]="true">
+                    <span fd-nested-list-title>Link 2</span>
+                </a>
+            </li>
+            <li fd-nested-list-item>
+                <a fd-nested-list-link>
+                    <span fd-nested-list-title>Link 3</span>
+                </a>
+            </li>
+            <li fd-nested-list-item>
+                <a fd-nested-list-link>
+                    <span fd-nested-list-title>Link 4</span>
+                </a>
+            </li>
+        </ul>
+    </div>
+
+    <div fd-side-nav-utility>
+        <ul fd-nested-list [textOnly]="true">
+            <li fd-nested-list-item>
+                <a fd-nested-list-link>
+                    <span fd-nested-list-title>Link 1</span>
+                </a>
+            </li>
+            <li fd-nested-list-item>
+                <a fd-nested-list-link>
+                    <span fd-nested-list-title>Link 2</span>
+                </a>
+            </li>
+        </ul>
+    </div>
+</fd-side-nav>
diff --git a/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-non-selectable-example/side-navigation-non-selectable-example.component.ts b/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-non-selectable-example/side-navigation-non-selectable-example.component.ts
new file mode 100644
index 00000000000..99c54212c67
--- /dev/null
+++ b/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-non-selectable-example/side-navigation-non-selectable-example.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'fd-side-navigation-non-selectable-example',
+  templateUrl: './side-navigation-non-selectable-example.component.html'
+})
+export class SideNavigationNonSelectableExampleComponent {
+}
diff --git a/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-programmatically-example/side-navigation-programmatically-example.component.html b/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-programmatically-example/side-navigation-programmatically-example.component.html
index 5b670d54d8f..71eff421f74 100644
--- a/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-programmatically-example/side-navigation-programmatically-example.component.html
+++ b/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-programmatically-example/side-navigation-programmatically-example.component.html
@@ -1,4 +1,4 @@
-<fd-side-nav>
+<fd-side-nav [selectable]="false">
     <div fd-side-nav-main>
         <ul fd-nested-list [textOnly]="true">
             <li fd-nested-list-item>
@@ -12,9 +12,12 @@
                 </a>
             </li>
             <li fd-nested-list-item [(expanded)]="open">
-                <a fd-nested-list-link>
-                    <span fd-nested-list-title>Link 3</span>
-                </a>
+                <div fd-nested-list-content [selected]="selected">
+                    <a fd-nested-list-link>
+                        <span fd-nested-list-title>Link 3</span>
+                    </a>
+                    <button fd-nested-list-expand-icon></button>
+                </div>
                 <ul fd-nested-list>
                     <li fd-nested-list-item>
                         <a fd-nested-list-link [selected]="selected">
diff --git a/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-three-levels-example/side-navigation-three-levels-example.component.html b/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-three-levels-example/side-navigation-three-levels-example.component.html
index 3d3da9157f7..68b8dd42daf 100644
--- a/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-three-levels-example/side-navigation-three-levels-example.component.html
+++ b/apps/docs/src/app/core/component-docs/side-navigation/examples/side-navigation-three-levels-example/side-navigation-three-levels-example.component.html
@@ -12,13 +12,16 @@
                 </a>
             </li>
             <li fd-nested-list-item>
-                <a fd-nested-list-link>
-                    <span fd-nested-list-title>Link 3</span>
-                </a>
+                <div fd-nested-list-content>
+                    <a fd-nested-list-link>
+                        <span fd-nested-list-title>Link 3</span>
+                    </a>
+                    <button fd-nested-list-expand-icon></button>
+                </div>
                 <ul fd-nested-list>
                     <li fd-nested-list-item>
                         <a fd-nested-list-link>
-                            <span fd-nested-list-title>Link 1</span>
+                            <span fd-nested-list-title>Link 2</span>
                         </a>
                     </li>
                     <li fd-nested-list-item>
diff --git a/apps/docs/src/app/core/component-docs/side-navigation/side-navigation-docs.component.html b/apps/docs/src/app/core/component-docs/side-navigation/side-navigation-docs.component.html
index b573926f139..0e521a82c59 100644
--- a/apps/docs/src/app/core/component-docs/side-navigation/side-navigation-docs.component.html
+++ b/apps/docs/src/app/core/component-docs/side-navigation/side-navigation-docs.component.html
@@ -33,6 +33,20 @@
 
 <separator></separator>
 
+<fd-docs-section-title [id]="'withCompact'" [componentName]="'sideNavigation'">
+    Side Navigation with Disabled Selection
+</fd-docs-section-title>
+<description>
+    Add <code>[selectable]="false"</code> to main side navigation component,
+    to prevent from changing selected state on items on click
+</description>
+<component-example>
+    <fd-side-navigation-non-selectable-example></fd-side-navigation-non-selectable-example>
+</component-example>
+<code-example [exampleFiles]="nonSelectableSideNav"></code-example>
+
+<separator></separator>
+
 <fd-docs-section-title [id]="'withMultipleTitles'" [componentName]="'sideNavigation'">
     Side Navigation with Multiple Levels
 </fd-docs-section-title>
diff --git a/apps/docs/src/app/core/component-docs/side-navigation/side-navigation-docs.component.ts b/apps/docs/src/app/core/component-docs/side-navigation/side-navigation-docs.component.ts
index 663cd522023..904a09556e0 100644
--- a/apps/docs/src/app/core/component-docs/side-navigation/side-navigation-docs.component.ts
+++ b/apps/docs/src/app/core/component-docs/side-navigation/side-navigation-docs.component.ts
@@ -6,6 +6,7 @@ import * as sideNavigationIconsSrc from '!raw-loader!./examples/side-navigation-
 import * as sideNavigationTitlesSrc from '!raw-loader!./examples/side-navigation-titles-example.component.html';
 import * as sideNavigationCompactSrc from '!raw-loader!./examples/side-navigation-compact-example.component.html';
 import * as sideNavigationMultiLevelSrc from '!raw-loader!./examples/side-navigation-three-levels-example/side-navigation-three-levels-example.component.html';
+import * as sideNavigationNonSelectSrc from '!raw-loader!./examples/side-navigation-non-selectable-example/side-navigation-non-selectable-example.component.html';
 import * as sideNavigationMultiLevelSrcTs from '!raw-loader!./examples/side-navigation-three-levels-example/side-navigation-three-levels-example.component.ts';
 import * as programmaticallySideNavigationSrc from '!raw-loader!./examples/side-navigation-programmatically-example/side-navigation-programmatically-example.component.html';
 import * as programmaticallySideNavigationSrcTs from '!raw-loader!./examples/side-navigation-programmatically-example/side-navigation-programmatically-example.component.ts';
@@ -94,6 +95,14 @@ export class SideNavigationDocsComponent {
         }
     ];
 
+    nonSelectableSideNav: ExampleFile[] = [
+        {
+            language: 'html',
+            code: sideNavigationNonSelectSrc,
+            fileName: 'side-navigation-non-selectable-example'
+        }
+    ];
+
     condensedSideNav: ExampleFile[] = [
         {
             language: 'html',
diff --git a/apps/docs/src/app/core/component-docs/side-navigation/side-navigation-docs.module.ts b/apps/docs/src/app/core/component-docs/side-navigation/side-navigation-docs.module.ts
index f90c9c1ebe4..063040fcd3d 100644
--- a/apps/docs/src/app/core/component-docs/side-navigation/side-navigation-docs.module.ts
+++ b/apps/docs/src/app/core/component-docs/side-navigation/side-navigation-docs.module.ts
@@ -18,6 +18,7 @@ import { SideNavigationMultipleSelectedExampleComponent } from './examples/side-
 import { SideNavigationCondensedObjectExampleComponent } from './examples/side-navigation-condensed-object-example/side-navigation-condensed-object-example.component';
 import { SideNavigationCondensedExampleComponent } from './examples/side-navigation-condensed-example/side-navigation-condensed-example.component';
 import { SideNavigationModule } from '@fundamental-ngx/core';
+import { SideNavigationNonSelectableExampleComponent} from './examples/side-navigation-non-selectable-example/side-navigation-non-selectable-example.component';
 
 const routes: Routes = [
     {
@@ -45,7 +46,9 @@ const routes: Routes = [
         SideNavigationThreeLevelsExampleComponent,
         SideNavigationCondensedObjectExampleComponent,
         SideNavigationProgrammaticallyExampleComponent,
-        SideNavigationMultipleSelectedExampleComponent
+        SideNavigationMultipleSelectedExampleComponent,
+        SideNavigationNonSelectableExampleComponent
     ]
 })
-export class SideNavigationDocsModule {}
+export class SideNavigationDocsModule {
+}
diff --git a/apps/docs/src/app/core/component-docs/side-navigation/side-navigation-header/side-navigation-header.component.html b/apps/docs/src/app/core/component-docs/side-navigation/side-navigation-header/side-navigation-header.component.html
index 67d0de6e3d7..6599eea2574 100644
--- a/apps/docs/src/app/core/component-docs/side-navigation/side-navigation-header/side-navigation-header.component.html
+++ b/apps/docs/src/app/core/component-docs/side-navigation/side-navigation-header/side-navigation-header.component.html
@@ -1,15 +1,15 @@
 <header>Side Navigation</header>
 <description
-    >The left navigation can always display or expand/collapse using the menu icon within the global navigation.<br /><br />
+>The left navigation can always display or expand/collapse using the menu icon within the global navigation.<br/><br/>
     Side navigation anchors are keyboard navigated, it can be achieved by <code>ArrowDown</code>, <code>ArrowUp</code>,
-    <code>ArrowRight</code>, <code>ArrowLeft</code> and basic <code>Tab</code>. Sub-levels of tiered side navigation can
-    be opened with the space bar, enter key or right arrow.<br /><br />
+    and basic <code>Tab</code>. Sub-levels of tiered side navigation can be opened with the space bar, enter key or
+    right arrow.<br/><br/>
     Expanded state: Only the selected item itself, be it a first-level or second-level item, shows the selection
-    indication.<br /><br />
+    indication.<br/><br/>
     Collapsed state: The first-level item shows a selection indication either when itself or one of its
-    second-level/children items is selected.<br /><br />
+    second-level/children items is selected.<br/><br/>
     Collapsed with Popover: When a Popover is shown, both the first-level item in the Side Navigation, as well as the
-    selected second-level item in the Popover, both show the selection indication.
+    selected second-level item in the Popover, both show the selection indication. <br/><br/>
 </description>
 <import module="SideNavigationModule"></import>
 
diff --git a/libs/core/package-lock.json b/libs/core/package-lock.json
index ee313c84bac..f177aedf438 100644
--- a/libs/core/package-lock.json
+++ b/libs/core/package-lock.json
@@ -1,21 +1,5 @@
 {
   "name": "@fundamental-ngx/core",
   "version": "VERSION_PLACEHOLDER",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "@sap-theming/theming-base-content": {
-      "version": "11.1.12",
-      "resolved": "https://registry.npmjs.org/@sap-theming/theming-base-content/-/theming-base-content-11.1.12.tgz",
-      "integrity": "sha512-3fNT9NqHNTp9HD4V4F6gI3Rx94zOw5HYo8pIeZh2dLRWRoDNf01cuDzzXBg6LNj6CEQdEEyMFFI0NgBGFFoOOQ=="
-    },
-    "fundamental-styles": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/fundamental-styles/-/fundamental-styles-0.2.0.tgz",
-      "integrity": "sha512-doczof6smRYDpYx2zvbb4/CfPDz+0t9h++zcegRAeE3fYYGnZ4uPnXx7qUMsm7l58aLGF3qbPime2ofvnQzmjw==",
-      "requires": {
-        "@sap-theming/theming-base-content": "^11.1.10"
-      }
-    }
-  }
+  "lockfileVersion": 1
 }
diff --git a/libs/core/src/lib/nested-list/nested-content/nested-list-content.directive.spec.ts b/libs/core/src/lib/nested-list/nested-content/nested-list-content.directive.spec.ts
new file mode 100644
index 00000000000..fafef962ae7
--- /dev/null
+++ b/libs/core/src/lib/nested-list/nested-content/nested-list-content.directive.spec.ts
@@ -0,0 +1,69 @@
+import { NestedListContentDirective } from './nested-list-content.directive';
+import { Component, ViewChild } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NestedListModule } from '../nested-list.module';
+import { NestedListStateService } from '../nested-list-state.service';
+import { NestedListExpandIconDirective } from '../nested-list-directives';
+import { NestedItemService } from '../nested-item/nested-item.service';
+
+@Component({
+    template: `
+        <div fd-nested-list-content>
+            <a fd-nested-list-link>
+                <span fd-nested-list-icon [glyph]="'settings'"></span>
+                <span fd-nested-list-title>Link 1</span>
+            </a>
+            <a fd-nested-list-expand-icon></a>
+        </div>
+    `
+})
+class TestNestedContainerComponent {
+    @ViewChild(NestedListContentDirective)
+    directiveElement: NestedListContentDirective;
+
+    @ViewChild(NestedListExpandIconDirective)
+    iconElement: NestedListExpandIconDirective;
+}
+
+describe('NestedContentDirective', () => {
+    let component: TestNestedContainerComponent;
+    let directiveElement: NestedListContentDirective;
+    let iconElement: NestedListExpandIconDirective;
+    let fixture: ComponentFixture<TestNestedContainerComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [NestedListModule],
+            declarations: [TestNestedContainerComponent],
+            providers: [NestedListStateService, NestedItemService]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestNestedContainerComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+        directiveElement = component.directiveElement;
+        iconElement = component.iconElement;
+        fixture.detectChanges();
+    });
+
+    it('Should have good classes', () => {
+        const classList = (directiveElement as any)._elementRef.nativeElement.classList;
+        expect(classList.contains('has-child')).toBeFalsy();
+        expect(classList.contains('is-selected')).toBeFalsy();
+
+        directiveElement.selected = true;
+
+        fixture.detectChanges();
+
+        expect(classList.contains('is-selected')).toBeTruthy();
+    });
+
+    it('Should propagate expanded state to icon', () => {
+        expect(iconElement.expanded).toBeFalsy();
+        directiveElement.changeExpandedState(true);
+        fixture.detectChanges();
+        expect(iconElement.expanded).toBeTruthy();
+    });
+});
diff --git a/libs/core/src/lib/nested-list/nested-content/nested-list-content.directive.ts b/libs/core/src/lib/nested-list/nested-content/nested-list-content.directive.ts
new file mode 100644
index 00000000000..2886834096c
--- /dev/null
+++ b/libs/core/src/lib/nested-list/nested-content/nested-list-content.directive.ts
@@ -0,0 +1,140 @@
+import {
+    AfterContentInit,
+    ChangeDetectorRef,
+    ContentChild,
+    Directive,
+    ElementRef,
+    EventEmitter,
+    HostBinding,
+    HostListener,
+    Input,
+    OnDestroy,
+    Output,
+    Renderer2
+} from '@angular/core';
+import { NestedLinkDirective } from '../nested-link/nested-link.directive';
+import { NestedListExpandIconDirective } from '../nested-list-directives';
+import { NestedItemService } from '../nested-item/nested-item.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Directive({
+    selector: '[fdNestedListContent], [fd-nested-list-content]',
+    host: {
+        'tabindex': '0'
+    }
+})
+export class NestedListContentDirective implements AfterContentInit, OnDestroy {
+
+    /** Whether this element is selected*/
+    @Input()
+    @HostBinding('class.is-selected')
+    selected: boolean = false;
+
+    /** Event thrown, when selected state is changed */
+    @Output()
+    selectedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+    /** Event that is thrown, when any keyboard event is dispatched on this element */
+    @Output()
+    readonly keyboardTriggered: EventEmitter<KeyboardEvent> = new EventEmitter<KeyboardEvent>();
+
+    /** Event that is thrown, when this element is clicked */
+    @Output()
+    readonly clicked: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+    /** @hidden */
+    @HostBinding('class.fd-nested-list__content')
+    fdNestedListContentClass: boolean = true;
+
+    /**
+     * @hidden
+     * Attribute controlled by the parent `NestedItemDirective`
+     */
+    @HostBinding('class.has-child')
+    hasChildren: boolean = false;
+
+    @ContentChild(NestedLinkDirective)
+    nestedLink: NestedLinkDirective;
+
+    @ContentChild(NestedListExpandIconDirective)
+    nestedExpandIcon: NestedListExpandIconDirective;
+
+    /** An RxJS Subject that will kill the data stream upon component’s destruction (for unsubscribing)  */
+    private readonly onDestroy$: Subject<void> = new Subject<void>();
+
+    /** @hidden */
+    constructor(
+        public changeDetRef: ChangeDetectorRef,
+        private _renderer: Renderer2,
+        private _elementRef: ElementRef,
+        private _itemService: NestedItemService,
+    ) {}
+
+    /** @hidden */
+    ngAfterContentInit(): void {
+        this._makeLinkUnFocusable();
+        this._setFocusSubscription();
+    }
+
+    /** @hidden */
+    ngOnDestroy(): void {
+        this.onDestroy$.next();
+        this.onDestroy$.complete();
+    }
+
+    /** Keyboard Event Handler */
+    @HostListener('keydown', ['$event'])
+    onKeyDown(event: KeyboardEvent): void {
+        this.keyboardTriggered.emit(event);
+        this._itemService.keyDown.next(event);
+    }
+
+    /** Handler for mouse events */
+    @HostListener('click', ['$event'])
+    onClick(event: MouseEvent): void {
+        this._itemService.click.next();
+    }
+
+    /** Method to trigger selected state change */
+    changeSelected(selected: boolean): void {
+        this.selected = selected;
+        this.selectedChange.emit(selected);
+    }
+
+    /** Expanded state change propagation method */
+    changeExpandedState(expanded: boolean): void {
+        if (this.nestedExpandIcon) {
+            this.nestedExpandIcon.expanded = expanded;
+            this.changeDetRef.detectChanges();
+        }
+    }
+
+    /** Set focus on the element. */
+    focus(): void {
+        this._elementRef.nativeElement.focus();
+    }
+
+    /** Dispatches the click event on the element */
+    click(): void {
+        this.focus();
+        if (this.nestedLink) {
+            this.nestedLink.click()
+        }
+    }
+
+    /** Add subscription for child focusing */
+    private _setFocusSubscription(): void {
+        this._itemService.focus.pipe(
+            takeUntil(this.onDestroy$)
+        ).subscribe(() => this.focus());
+    }
+
+    /** Hide link child element from tab key */
+    private _makeLinkUnFocusable(): void {
+        if (this.nestedLink) {
+            this.nestedLink.tabIndex = -1;
+            this.changeDetRef.detectChanges();
+        }
+    }
+}
diff --git a/libs/core/src/lib/nested-list/nested-item/nested-item.directive.spec.ts b/libs/core/src/lib/nested-list/nested-item/nested-item.directive.spec.ts
index 1244901d06a..6aed856e5a2 100644
--- a/libs/core/src/lib/nested-list/nested-item/nested-item.directive.spec.ts
+++ b/libs/core/src/lib/nested-list/nested-item/nested-item.directive.spec.ts
@@ -1,6 +1,9 @@
 import { NestedItemDirective } from './nested-item.directive';
 import { Component, ViewChild } from '@angular/core';
-import { MenuKeyboardService, PopoverModule } from '@fundamental-ngx/core';
+import { PopoverModule } from '../../popover/popover.module';
+import { MenuKeyboardService } from '../../menu/menu-keyboard.service';
+import { NestedLinkDirective } from '../nested-link/nested-link.directive';
+import { NestedListExpandIconDirective } from '../nested-list-directives';
 import { NestedListModule } from '../nested-list.module';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NestedListKeyboardService } from '../nested-list-keyboard.service';
@@ -11,12 +14,15 @@ import { NestedItemService } from './nested-item.service';
     template: `
         <li fd-nested-list-item #popoverNestedItemElement>
             <fd-nested-list-popover>
-                <a fd-nested-list-link>
-                    <span fd-nested-list-icon [glyph]="'settings'"></span>
-                    <span fd-nested-list-title>Link 3</span>
-                </a>
+                <div fd-nested-list-content>
+                    <a fd-nested-list-link>
+                        <span fd-nested-list-icon [glyph]="'settings'"></span>
+                        <span fd-nested-list-title>Link 1</span>
+                    </a>
+                    <a fd-nested-list-expand-icon #iconElementPopover></a>
+                </div>
                 <ul fd-nested-list [textOnly]="false">
-                    <li fd-nested-list-item>
+                    <li fd-nested-list-item #popoverSubItemElement>
                         <a fd-nested-list-link>
                             <span fd-nested-list-icon [glyph]="'settings'"></span>
                             <span fd-nested-list-title>Link 1</span>
@@ -26,12 +32,15 @@ import { NestedItemService } from './nested-item.service';
             </fd-nested-list-popover>
         </li>
         <li fd-nested-list-item #listNestedItemElement>
-            <a fd-nested-list-link>
-                <span fd-nested-list-icon [glyph]="'settings'"></span>
-                <span fd-nested-list-title>Link 3</span>
-            </a>
+            <div fd-nested-list-content>
+                <a fd-nested-list-link #linkDirective>
+                    <span fd-nested-list-icon [glyph]="'settings'"></span>
+                    <span fd-nested-list-title>Link 1</span>
+                </a>
+                <a fd-nested-list-expand-icon #iconElement></a>
+            </div>
             <ul fd-nested-list [textOnly]="false">
-                <li fd-nested-list-item>
+                <li fd-nested-list-item #subItemElement>
                     <a fd-nested-list-link>
                         <span fd-nested-list-icon [glyph]="'settings'"></span>
                         <span fd-nested-list-title>Link 1</span>
@@ -48,20 +57,38 @@ import { NestedItemService } from './nested-item.service';
     `
 })
 class TestNestedContainerComponent {
-    @ViewChild('listNestedItemElement', { static: true, read: NestedItemDirective })
+    @ViewChild('listNestedItemElement', { read: NestedItemDirective })
     nestedItemListDirective: NestedItemDirective;
 
-    @ViewChild('popoverNestedItemElement', { static: true, read: NestedItemDirective })
+    @ViewChild('subItemElement', { read: NestedItemDirective })
+    subItemElement: NestedItemDirective;
+
+    @ViewChild('popoverNestedItemElement', { read: NestedItemDirective })
     nestedItemPopoverDirective: NestedItemDirective;
 
-    @ViewChild('emptyItemDirective', { static: true, read: NestedItemDirective })
+    @ViewChild('popoverSubItemElement', { read: NestedItemDirective })
+    popoverSubItemElement: NestedItemDirective;
+
+    @ViewChild('emptyItemDirective', { read: NestedItemDirective })
     emptyItemDirective: NestedItemDirective;
+
+    @ViewChild('iconElementPopover', { read: NestedListExpandIconDirective })
+    popoverIconElement: NestedListExpandIconDirective;
+
+    @ViewChild('iconElement', { read: NestedListExpandIconDirective })
+    iconElement: NestedListExpandIconDirective;
+
+    @ViewChild('linkElement', {read: NestedLinkDirective })
+    linkDirective: NestedLinkDirective;
 }
 
 describe('NestedItemDirective', () => {
     let component: TestNestedContainerComponent;
     let nestedItemPopoverDirective: NestedItemDirective;
     let nestedItemListDirective: NestedItemDirective;
+    let subItemElement: NestedItemDirective;
+    let popoverSubItemElement: NestedItemDirective;
+    let iconElement: NestedListExpandIconDirective;
     let emptyItemDirective: NestedItemDirective;
     let fixture: ComponentFixture<TestNestedContainerComponent>;
     let itemService: NestedItemService;
@@ -76,18 +103,22 @@ describe('NestedItemDirective', () => {
 
     beforeEach(() => {
         fixture = TestBed.createComponent(TestNestedContainerComponent);
+        fixture.detectChanges();
         component = fixture.componentInstance;
         fixture.detectChanges();
         nestedItemListDirective = component.nestedItemListDirective;
         emptyItemDirective = component.emptyItemDirective;
         nestedItemPopoverDirective = component.nestedItemPopoverDirective;
+        subItemElement = component.subItemElement;
+        popoverSubItemElement = component.popoverSubItemElement;
+        iconElement = component.iconElement;
         itemService = (<any>nestedItemPopoverDirective)._itemService;
         fixture.detectChanges();
     });
 
     it('Item with popover should have children', () => {
         expect(nestedItemPopoverDirective.hasChildren).toBeTruthy();
-        expect(nestedItemPopoverDirective.linkItem.hasChildren).toBeTruthy();
+        expect(nestedItemPopoverDirective.contentItem.hasChildren).toBeTruthy();
     });
 
     it('Item with popover should react to open change from popover', () => {
@@ -107,6 +138,7 @@ describe('NestedItemDirective', () => {
         nestedItemListDirective.expanded = false;
         nestedItemListDirective.triggerOpen();
         expect(nestedItemListDirective.expanded).toBeTruthy();
+        expect(nestedItemListDirective.contentItem.nestedExpandIcon.expanded).toBeTruthy();
     });
 
     it('Item with popover, should pass reference to popover child', () => {
@@ -115,7 +147,7 @@ describe('NestedItemDirective', () => {
 
     it('Item with list should have children', () => {
         expect(nestedItemListDirective.hasChildren).toBeTruthy();
-        expect(nestedItemListDirective.linkItem.hasChildren).toBeTruthy();
+        expect(nestedItemListDirective.contentItem.hasChildren).toBeTruthy();
     });
 
     it('Item with list should propagate expanded change event', () => {
@@ -129,20 +161,61 @@ describe('NestedItemDirective', () => {
         nestedItemListDirective.expanded = false;
         nestedItemListDirective.triggerOpen();
         expect(nestedItemListDirective.expanded).toBeTruthy();
+        expect(nestedItemListDirective.contentItem.nestedExpandIcon.expanded).toBeTruthy();
     });
 
     it('Empty item should not have children', () => {
         expect(emptyItemDirective.hasChildren).toBeFalsy();
-        expect(emptyItemDirective.linkItem.hasChildren).toBeFalsy();
     });
 
-    it('Should react to events from link child', () => {
-        spyOn(emptyItemDirective, 'toggle');
-        spyOn(emptyItemDirective.keyboardTriggered, 'emit');
-        const keyboardEvent: any = { key: 'value' };
-        emptyItemDirective.linkItem.clicked.emit();
-        emptyItemDirective.linkItem.keyboardTriggered.emit(keyboardEvent);
-        expect(emptyItemDirective.toggle).toHaveBeenCalled();
-        expect(emptyItemDirective.keyboardTriggered.emit).toHaveBeenCalledWith(keyboardEvent);
+    it('Should react to events from icon child', () => {
+        fixture.detectChanges();
+        spyOn(nestedItemListDirective, 'toggle');
+        nestedItemListDirective.contentItem.nestedExpandIcon.onClick();
+        fixture.detectChanges();
+        expect(nestedItemListDirective.toggle).toHaveBeenCalledWith();
+    });
+
+    it('Popover should react to events from icon child', () => {
+        fixture.detectChanges();
+        itemService.popover.handleOpenChange(true);
+        spyOn(nestedItemPopoverDirective, 'toggle');
+        nestedItemPopoverDirective.contentItem.nestedExpandIcon.onClick();
+        fixture.detectChanges();
+        expect(nestedItemPopoverDirective.toggle).toHaveBeenCalledWith();
+    });
+
+    it('Should handle keyboard event from link', () => {
+        fixture.detectChanges();
+        spyOn(nestedItemListDirective.keyboardTriggered, 'emit');
+        const keyboardEvent = new KeyboardEvent('keyDown');
+        nestedItemListDirective.contentItem.nestedLink.onKeyDown(keyboardEvent);
+        fixture.detectChanges();
+        expect(nestedItemListDirective.keyboardTriggered.emit).toHaveBeenCalledWith(keyboardEvent);
+    });
+
+    it('Popover Should handle keyboard event from link', () => {
+        fixture.detectChanges();
+        spyOn(nestedItemPopoverDirective.keyboardTriggered, 'emit');
+        const keyboardEvent = new KeyboardEvent('keyDown');
+        nestedItemPopoverDirective.contentItem.nestedLink.onKeyDown(keyboardEvent);
+        fixture.detectChanges();
+        expect(nestedItemPopoverDirective.keyboardTriggered.emit).toHaveBeenCalledWith(keyboardEvent);
+    });
+
+    it('Popover Should handle keyboard event from sub items', () => {
+        spyOn((<any>nestedItemPopoverDirective), '_selectedChange');
+        fixture.detectChanges();
+        popoverSubItemElement.linkItem.onClick(new MouseEvent('click'));
+        fixture.detectChanges();
+        expect((<any>nestedItemPopoverDirective)._selectedChange).toHaveBeenCalledWith((<any>popoverSubItemElement)._elementId);
+    });
+
+    it('Should handle keyboard event from sub items', () => {
+        spyOn((<any>nestedItemListDirective), '_selectedChange');
+        fixture.detectChanges();
+        subItemElement.linkItem.onClick(new MouseEvent('click'));
+        fixture.detectChanges();
+        expect((<any>nestedItemListDirective)._selectedChange).toHaveBeenCalledWith((<any>subItemElement)._elementId);
     });
 });
diff --git a/libs/core/src/lib/nested-list/nested-item/nested-item.directive.ts b/libs/core/src/lib/nested-list/nested-item/nested-item.directive.ts
index b7cafbd3cd3..6fc5489516c 100644
--- a/libs/core/src/lib/nested-list/nested-item/nested-item.directive.ts
+++ b/libs/core/src/lib/nested-list/nested-item/nested-item.directive.ts
@@ -1,45 +1,36 @@
-import { AfterContentInit, ContentChild, Directive, EventEmitter, HostBinding, Input, Output } from '@angular/core';
+import {
+    AfterContentInit,
+    ContentChild,
+    Directive,
+    EventEmitter,
+    HostBinding, HostListener,
+    Input, OnDestroy,
+    Output
+} from '@angular/core';
 import { NestedLinkDirective } from '../nested-link/nested-link.directive';
 import { NestedListKeyboardService } from '../nested-list-keyboard.service';
 import { NestedItemInterface } from './nested-item.interface';
 import { NestedItemService } from './nested-item.service';
+import { NestedListContentDirective } from '../nested-content/nested-list-content.directive';
+import { Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+import { NestedListStateService } from '../nested-list-state.service';
+
+let sideNavigationItemUniqueId: number = 0;
 
 @Directive({
     selector: '[fdNestedItem], [fd-nested-list-item]',
-    providers: [NestedItemService]
+    providers: [
+        NestedItemService
+    ]
 })
-export class NestedItemDirective implements AfterContentInit, NestedItemInterface {
-    /** @hidden */
-    @HostBinding('class.fd-nested-list__item')
-    fdNestedListItemClass: boolean = true;
-
-    /**
-     * @hidden
-     * Reference to the link directive, to allow manipulating the properties of this element.
-     */
-    @ContentChild(NestedLinkDirective)
-    linkItem: NestedLinkDirective;
-
-    /** Check if the item element has any child */
-    public get hasChildren(): boolean {
-        return !!(this._itemService && this._itemService.list);
-    }
-
-    /** Get all of the children item elements */
-    public get allChildrenItems(): NestedItemInterface[] {
-        if (this._itemService && this._itemService.list) {
-            return this._itemService.list.nestedItems.toArray();
-        } else {
-            return [];
-        }
-    }
-
-    /** @hidden */
-    constructor(private _itemService: NestedItemService, private _keyboardService: NestedListKeyboardService) {}
+export class NestedItemDirective implements AfterContentInit, NestedItemInterface, OnDestroy {
 
     /** Whether item should be expanded */
     @Input() set expanded(expanded: boolean) {
-        this.propagateOpenChange(expanded);
+        if (expanded !== this._expanded) {
+            this.propagateOpenChange(expanded);
+        }
     }
 
     /** @hidden */
@@ -47,9 +38,6 @@ export class NestedItemDirective implements AfterContentInit, NestedItemInterfac
         return this._expanded;
     }
 
-    /** @hidden */
-    private _expanded: boolean = false;
-
     /** Event thrown, when expanded state is changed */
     @Output()
     readonly expandedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
@@ -59,30 +47,68 @@ export class NestedItemDirective implements AfterContentInit, NestedItemInterfac
     readonly keyboardTriggered: EventEmitter<KeyboardEvent> = new EventEmitter<KeyboardEvent>();
 
     /** @hidden */
-    ngAfterContentInit(): void {
-        /** Propagate hasChildren property */
-        if (this.hasChildren && this.linkItem) {
-            this.linkItem.hasChildren = true;
-            this.linkItem.changeDetRef.detectChanges();
-        }
+    @HostBinding('class.fd-nested-list__item')
+    fdNestedListItemClass: boolean = true;
 
-        if (this.linkItem) {
-            /** Subscribe to mouse click event, thrown by link item */
-            this.linkItem.clicked.subscribe(() => this.toggle());
+    /**
+     * @hidden
+     * Reference to the link directive, to allow manipulating the properties of this element.
+     */
+    @ContentChild(NestedLinkDirective)
+    linkItem: NestedLinkDirective;
 
-            /** Subscribe to keyboard event and throw it farther */
-            this.linkItem.keyboardTriggered.subscribe((keyboardEvent) => this.keyboardTriggered.emit(keyboardEvent));
-        }
+    /**
+     * @hidden
+     * Mostly used, when this item has list
+     * Reference to the content directive, to allow manipulating the properties of this element.
+     */
+    @ContentChild(NestedListContentDirective)
+    contentItem: NestedListContentDirective;
 
-        /** Pass this element to popover child item, to allow control `expanded` value */
-        if (this._itemService.popover) {
-            this._itemService.popover.parentItemElement = this;
-        }
+    /** @hidden */
+    constructor (
+        private _itemService: NestedItemService,
+        private _keyboardService: NestedListKeyboardService,
+        private _stateService: NestedListStateService
+    ) {}
 
+    /** @hidden */
+    private _expanded: boolean = false;
+
+    /** An RxJS Subject that will kill the data stream upon component’s destruction (for unsubscribing)  */
+    private readonly _onDestroy$: Subject<void> = new Subject<void>();
+
+    /** Unique element ID */
+    private readonly _elementId: string = 'fdNestedItem' + sideNavigationItemUniqueId++;
+
+    /** @hidden */
+    ngAfterContentInit(): void {
+        this._setUpSubscriptions();
+        this._propagateHasChildrenProperty();
+        this._passItemReferences();
         /** Propagate initial open state to children */
         this.propagateOpenChange(this._expanded);
     }
 
+    /** @hidden */
+    ngOnDestroy(): void {
+        this._onDestroy$.next();
+        this._onDestroy$.complete();
+    }
+
+    /** Check if the item element has any child */
+    get hasChildren(): boolean {
+        return !!(this._itemService && this._itemService.list);
+    }
+
+    /** Get all of the children item elements */
+    get allChildrenItems(): NestedItemInterface[] {
+        if (this._itemService && this._itemService.list) {
+            return this._itemService.list.nestedItems.toArray()
+        }
+        return [];
+    }
+
     /** Method that expand the item and propagate it to children */
     triggerOpen(): void {
         if (!this.expanded) {
@@ -107,18 +133,34 @@ export class NestedItemDirective implements AfterContentInit, NestedItemInterfac
 
     /** Method that dispatches `click` event on link item*/
     click(): void {
-        if (this.linkItem) {
+        if (this.contentItem) {
+            this.contentItem.click();
+        } else if (this.linkItem) {
             this.linkItem.click();
         }
     }
 
     /** Method that focuses link item*/
     focus(): void {
-        if (this.linkItem) {
+        if (this.contentItem) {
+            this.contentItem.focus();
+        } else if (this.linkItem) {
             this.linkItem.focus();
         }
     }
 
+    /** Method that provides information if element, or children of this element has passed id */
+    containsId(id: string): boolean {
+        if (this._elementId === id) {
+            return true;
+        }
+        if (this._itemService.list) {
+            return !!this._itemService.list.nestedItems.find(item => item.containsId(id))
+        } else {
+            return false;
+        }
+    }
+
     /**
      * @hidden
      * Propagate open state to all of the children
@@ -126,14 +168,17 @@ export class NestedItemDirective implements AfterContentInit, NestedItemInterfac
     private propagateOpenChange(open: boolean): void {
         this._expanded = open;
 
-        /** Propagate to child link directive */
-        if (this.linkItem) {
-            this.linkItem.expanded = open;
+        /**
+         * Propagate to child content directive, which contains icon and link
+         */
+        if (this.contentItem) {
+            this.contentItem.changeExpandedState(open);
         }
 
         /** Propagate hidden flag to list component, that is passed from child */
         if (this._itemService.list) {
             this._itemService.list.hidden = !open;
+            this._itemService.list.detectChanges();
         }
 
         /** Propagate open flag to popover list component, that is passed from child */
@@ -141,8 +186,69 @@ export class NestedItemDirective implements AfterContentInit, NestedItemInterfac
             this._itemService.popover.open = open;
         }
 
-        /** Trigger event to provide keyboard support to new list of opened item element. */
-        this._keyboardService.refresh$.next();
+        /**
+         * If there are any list below
+         * Trigger event to provide keyboard support to new list of opened item element.
+         * */
+        if (this._shouldRefreshKeyboardService()) {
+            this._keyboardService.refresh$.next();
+        }
+
         this.expandedChange.emit(open);
     }
+
+    /** @hidden */
+    private _shouldRefreshKeyboardService(): boolean {
+        return !!(this._itemService.popover || this._itemService.list || this.contentItem);
+    }
+
+    /** @hidden */
+    private _setUpSubscriptions(): void {
+        /** Subscribe to mouse click event, thrown by link item */
+        this._itemService.toggle
+            .pipe(takeUntil(this._onDestroy$))
+            .subscribe(() => this.toggle());
+
+        /** Subscribe to mouse click event, thrown by link item */
+        this._itemService.click
+            .pipe(takeUntil(this._onDestroy$))
+            .subscribe(() => this._stateService.onSelected.next(this._elementId));
+
+        /** Subscribe to keyboard event and throw it farther */
+        this._itemService.keyDown
+            .pipe(takeUntil(this._onDestroy$))
+            .subscribe(keyboardEvent => this.keyboardTriggered.emit(keyboardEvent));
+
+        /** Subscribe to selected state change, it's not triggered, when selectable flag is disabled*/
+        this._stateService.onSelected
+            .pipe(
+                takeUntil(this._onDestroy$),
+                filter(() => this._stateService.selectable)
+            )
+            .subscribe(id => this._selectedChange(id));
+    }
+
+    /** @hidden */
+    private _propagateHasChildrenProperty(): void {
+        if (this.contentItem && this.hasChildren) {
+            this.contentItem.hasChildren = true;
+            this.contentItem.changeDetRef.detectChanges();
+        }
+    }
+
+    /** Pass this element to popover child item, to allow control `expanded` value */
+    private _passItemReferences(): void {
+        if (this._itemService.popover) {
+            this._itemService.popover.parentItemElement = this;
+        }
+    }
+
+    /** Change of selected state of content or link, if there is any children with I */
+    private _selectedChange(id: string): void {
+        if (this.contentItem) {
+            this.contentItem.changeSelected(this.containsId(id));
+        } else if (this.linkItem) {
+            this.linkItem.changeSelected(this.containsId(id));
+        }
+    }
 }
diff --git a/libs/core/src/lib/nested-list/nested-item/nested-item.interface.ts b/libs/core/src/lib/nested-list/nested-item/nested-item.interface.ts
index 0a3ab5e940f..e85fad0fe33 100644
--- a/libs/core/src/lib/nested-list/nested-item/nested-item.interface.ts
+++ b/libs/core/src/lib/nested-list/nested-item/nested-item.interface.ts
@@ -11,4 +11,5 @@ export interface NestedItemInterface extends DefaultMenuItem {
     linkItem: NestedLinkDirective;
     allChildrenItems: NestedItemInterface[];
     hasChildren: boolean;
+    containsId: (id: string) => boolean
 }
diff --git a/libs/core/src/lib/nested-list/nested-item/nested-item.service.ts b/libs/core/src/lib/nested-list/nested-item/nested-item.service.ts
index 368cd8e793f..2c1b3f47bd1 100644
--- a/libs/core/src/lib/nested-list/nested-item/nested-item.service.ts
+++ b/libs/core/src/lib/nested-list/nested-item/nested-item.service.ts
@@ -1,8 +1,21 @@
 import { NestedListInterface } from '../nested-list/nested-list.interface';
 import { NestedListPopoverInterface } from '../nested-list-popover/nested-list-popover.interface';
+import { Subject } from 'rxjs';
 
 /** Contains references to popover or list nested components, that are placed as direct children of item component */
 export class NestedItemService {
     list: NestedListInterface;
     popover?: NestedListPopoverInterface;
+
+    /** Subject fired when expand icon is clicked */
+    toggle: Subject<boolean> = new Subject<boolean>();
+
+    /** Subject fired, when child elements are focused */
+    focus: Subject<void> = new Subject<void>();
+
+    /** Subject fired, when content or link is clicked */
+    click: Subject<void> = new Subject<void>();
+
+    /** KeyDown handler, it is triggered from link, content and item elements */
+    keyDown: Subject<KeyboardEvent> = new Subject<KeyboardEvent>();
 }
diff --git a/libs/core/src/lib/nested-list/nested-link/nested-link.directive.spec.ts b/libs/core/src/lib/nested-list/nested-link/nested-link.directive.spec.ts
index 3a94e98cf4c..f4bf4d3fe50 100644
--- a/libs/core/src/lib/nested-list/nested-link/nested-link.directive.spec.ts
+++ b/libs/core/src/lib/nested-list/nested-link/nested-link.directive.spec.ts
@@ -3,6 +3,7 @@ import { NestedLinkDirective } from './nested-link.directive';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NestedListModule } from '../nested-list.module';
 import { NestedListStateService } from '../nested-list-state.service';
+import { NestedItemService } from '../nested-item/nested-item.service';
 
 @Component({
     template: `
@@ -26,7 +27,7 @@ describe('NestedLinkDirective', () => {
         TestBed.configureTestingModule({
             imports: [NestedListModule],
             declarations: [TestNestedContainerComponent],
-            providers: [NestedListStateService]
+            providers: [NestedListStateService, NestedItemService]
         }).compileComponents();
     }));
 
@@ -40,19 +41,15 @@ describe('NestedLinkDirective', () => {
 
     it('Should return good information', () => {
         expect(directiveElement.getTitle()).toBe('Link 1');
-        expect(directiveElement.hasChildren).toBeFalsy();
+        expect(directiveElement.selected).toBeFalsy();
     });
 
     it('Should have good classes', () => {
         directiveElement.selected = true;
-        directiveElement.hasChildren = true;
-        directiveElement.expanded = true;
         fixture.detectChanges();
 
         const classList = (directiveElement as any)._elementRef.nativeElement.classList;
 
-        expect(classList.contains('is-expanded')).toBeTruthy();
         expect(classList.contains('is-selected')).toBeTruthy();
-        expect(classList.contains('has-child')).toBeTruthy();
     });
 });
diff --git a/libs/core/src/lib/nested-list/nested-link/nested-link.directive.ts b/libs/core/src/lib/nested-list/nested-link/nested-link.directive.ts
index aaa0c180786..c5f7fd141ea 100644
--- a/libs/core/src/lib/nested-list/nested-link/nested-link.directive.ts
+++ b/libs/core/src/lib/nested-list/nested-link/nested-link.directive.ts
@@ -5,38 +5,18 @@ import {
     ElementRef,
     EventEmitter,
     HostBinding,
+    HostListener,
     Input,
-    OnInit,
     Output,
     Renderer2
 } from '@angular/core';
 import { NestedListTitleDirective } from '../nested-list-directives';
+import { NestedItemService } from '../nested-item/nested-item.service';
 
 @Directive({
-    selector: '[fdNestedLink], [fd-nested-list-link]',
-    host: {
-        tabindex: '0'
-    }
+    selector: '[fdNestedLink], [fd-nested-list-link]'
 })
-export class NestedLinkDirective implements OnInit {
-    /** @hidden */
-    @HostBinding('class.fd-nested-list__link')
-    fdNestedListItemClass: boolean = true;
-
-    /**
-     *  @hidden
-     *  Reference to title element, it is used, to get title for condensed mode.
-     */
-    @ContentChild(NestedListTitleDirective)
-    title: NestedListTitleDirective;
-
-    /** Event that is thrown, when any keyboard event is dispatched on this element */
-    @Output()
-    readonly keyboardTriggered: EventEmitter<KeyboardEvent> = new EventEmitter<KeyboardEvent>();
-
-    /** Event that is thrown, when this element is clicked */
-    @Output()
-    readonly clicked: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+export class NestedLinkDirective {
 
     /** Function that is called on click event dispatch on this element. */
     @Input()
@@ -47,21 +27,61 @@ export class NestedLinkDirective implements OnInit {
     @HostBinding('class.is-selected')
     selected: boolean = false;
 
+    /** Event thrown, when selected state is changed */
+    @Output()
+    selectedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+    /** @hidden */
+    @HostBinding('class.fd-nested-list__link')
+    fdNestedListItemClass: boolean = true;
+
     /**
      * @hidden
-     * Attribute controlled by the parent `NestedItemDirective`
      */
-    @HostBinding('class.is-expanded')
-    @HostBinding('attr.aria-expanded')
-    expanded: boolean = false;
+    @HostBinding('attr.tabindex')
+    tabIndex: number = 0;
 
     /**
-     * @hidden
-     * Attribute controlled by the parent `NestedItemDirective`
+     *  @hidden
+     *  Reference to title element, it is used, to get title for condensed mode.
      */
-    @HostBinding('class.has-child')
-    @HostBinding('attr.aria-haspopup')
-    hasChildren: boolean = false;
+    @ContentChild(NestedListTitleDirective)
+    title: NestedListTitleDirective;
+
+    /** @hidden */
+    constructor(
+        public changeDetRef: ChangeDetectorRef,
+        private _renderer: Renderer2,
+        private _elementRef: ElementRef,
+        private _itemService: NestedItemService
+    ) {}
+
+    /** Handler for keyboard events */
+    @HostListener('keydown', ['$event'])
+    onKeyDown(event: KeyboardEvent): void {
+        this._itemService.keyDown.next(event);
+    }
+
+    /** Handler for mouse events */
+    @HostListener('click', ['$event'])
+    onClick(event: MouseEvent): void {
+        this._itemService.click.next();
+        if (this.onClickCallback) {
+            this.onClickCallback();
+        }
+    }
+
+    /** Handler for focus events */
+    @HostListener('focus')
+    onFocus(): void {
+        this._itemService.focus.next();
+    }
+
+    /** Method to trigger selected state change */
+    changeSelected(selected: boolean): void {
+        this.selected = selected;
+        this.selectedChange.emit(selected);
+    }
 
     /** Set focus on the element. */
     focus(): void {
@@ -73,31 +93,9 @@ export class NestedLinkDirective implements OnInit {
         this._elementRef.nativeElement.click();
     }
 
-    /** @hidden */
-    constructor(
-        public changeDetRef: ChangeDetectorRef,
-        private _renderer: Renderer2,
-        private _elementRef: ElementRef
-    ) {}
-
-    /** @hidden */
-    ngOnInit(): void {
-        /** Add event listeners on the element */
-
-        /** Keyboard */
-        this._renderer.listen(this._elementRef.nativeElement, 'keydown', (event) => this.keyboardTriggered.emit(event));
-
-        /** Mouse Click */
-        this._renderer.listen(this._elementRef.nativeElement, 'click', (event) => {
-            if (this.onClickCallback) {
-                this.onClickCallback();
-            }
-            this.clicked.emit(event);
-        });
-    }
-
     /** Returns the title value of the title directive */
     getTitle(): string {
         return this.title && this.title.getInnerText();
     }
+
 }
diff --git a/libs/core/src/lib/nested-list/nested-list-directives.spec.ts b/libs/core/src/lib/nested-list/nested-list-directives.spec.ts
new file mode 100644
index 00000000000..66f79895c2d
--- /dev/null
+++ b/libs/core/src/lib/nested-list/nested-list-directives.spec.ts
@@ -0,0 +1,78 @@
+import { Component, ViewChild } from '@angular/core';
+import { NestedListExpandIconDirective, NestedListTitleDirective, NestedListIconDirective } from './nested-list-directives';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NestedItemService } from './nested-item/nested-item.service';
+
+@Component({
+    template: `
+        <div fd-nested-list-title>Title</div>
+        <button fd-nested-list-expand-icon></button>
+        <span fd-nested-list-icon></span>
+    `
+})
+class TestNestedContainerComponent {
+    @ViewChild(NestedListTitleDirective)
+    titleElement: NestedListTitleDirective;
+
+    @ViewChild(NestedListExpandIconDirective)
+    expandIconElement: NestedListExpandIconDirective;
+
+    @ViewChild(NestedListIconDirective)
+    iconElement: NestedListIconDirective;
+}
+
+describe('NestedListDirectives', () => {
+    let component: TestNestedContainerComponent;
+    let expandIconElement: NestedListExpandIconDirective;
+    let iconElement: NestedListIconDirective;
+    let titleElement: NestedListTitleDirective;
+    let fixture: ComponentFixture<TestNestedContainerComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                NestedListExpandIconDirective,
+                NestedListIconDirective,
+                NestedListTitleDirective,
+                TestNestedContainerComponent
+            ],
+            providers: [NestedItemService]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestNestedContainerComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+        expandIconElement = component.expandIconElement;
+        iconElement = component.iconElement;
+        titleElement = component.titleElement;
+        fixture.detectChanges();
+    });
+
+    it('Expand Icon Element should have good classes and react on click', () => {
+        expect(expandIconElement.expanded).toBeFalsy();
+
+        spyOn((<any>expandIconElement)._itemService.toggle, 'next');
+
+        expandIconElement.onClick();
+
+        fixture.detectChanges();
+
+        expect((<any>expandIconElement)._itemService.toggle.next).toHaveBeenCalled();
+        expect(expandIconElement.expanded).toBeTruthy();
+
+    });
+
+    it('Title should give valid title string', () => {
+        expect(titleElement.getInnerText()).toBe('Title');
+    });
+
+    it('Icon should have valid class', () => {
+        iconElement.glyph = 'custom-icon';
+        iconElement.buildComponentCssClass();
+        fixture.detectChanges();
+        const classList = (iconElement as any)._elementRef.nativeElement.classList;
+        expect(classList).toContain('sap-icon--' + 'custom-icon');
+    });
+});
diff --git a/libs/core/src/lib/nested-list/nested-list-directives.ts b/libs/core/src/lib/nested-list/nested-list-directives.ts
index e9b041ac0fe..bd0eab20f41 100644
--- a/libs/core/src/lib/nested-list/nested-list-directives.ts
+++ b/libs/core/src/lib/nested-list/nested-list-directives.ts
@@ -1,22 +1,27 @@
-import { Directive, ElementRef, HostBinding, Input } from '@angular/core';
-import { AbstractFdNgxClass } from '../utils/abstract-fd-ngx-class';
+import { Directive, ElementRef, HostBinding, HostListener, Input, OnChanges, OnInit } from '@angular/core';
+import { NestedItemService } from './nested-item/nested-item.service';
+import { applyCssClass } from '../utils/decorators/apply-css-class.decorator';
+import { CssClassBuilder } from '../utils/interfaces/css-class-builder.interface';
 
 @Directive({
     selector: '[fdNestedDirectivesHeader], [fd-nested-list-header]'
 })
 export class NestedListHeaderDirective {
+
     /** @hidden */
     @HostBinding('class.fd-nested-list__group-header')
     fdNestedListHeaderClass: boolean = true;
+
 }
 
 @Directive({
     selector: '[fdNestedDirectivesIcon], [fd-nested-list-icon]'
 })
-export class NestedListIconDirective extends AbstractFdNgxClass {
-    /** @hidden */
-    @HostBinding('class.fd-nested-list__icon')
-    fdNestedListIconClass: boolean = true;
+export class NestedListIconDirective implements CssClassBuilder, OnChanges, OnInit {
+
+    /** The property allows user to pass additional css classes */
+    @Input()
+    class: string = '';
 
     /**
      * The icon name to display. See the icon page for the list of icons
@@ -25,32 +30,96 @@ export class NestedListIconDirective extends AbstractFdNgxClass {
     @Input() glyph: string;
 
     /** @hidden */
-    _setProperties() {
-        if (this.glyph) {
-            this._addClassToElement('sap-icon--' + this.glyph);
-        }
-        this._addClassToElement('fd-nested-list__icon');
+    @HostBinding('class.fd-nested-list__icon')
+    fdNestedListIconClass: boolean = true;
+
+    /** @hidden */
+    constructor(private _elementRef: ElementRef) {}
+
+    /** @hidden */
+    ngOnChanges(): void {
+        this.buildComponentCssClass();
     }
 
     /** @hidden */
-    constructor(private elementRef: ElementRef) {
-        super(elementRef);
+    ngOnInit(): void {
+        this.buildComponentCssClass();
+    }
+
+    @applyCssClass
+    /** CssClassBuilder interface implementation */
+    buildComponentCssClass(): string {
+        return [
+            'fd-nested-list__icon',
+            this.glyph ? `sap-icon--${this.glyph}` : '',
+            this.class
+        ]
+            .filter((x) => x !== '')
+            .join(' ');
+    }
+
+    /** HasElementRef interface implementation */
+    elementRef(): ElementRef<any> {
+        return this._elementRef;
     }
+
 }
 
 @Directive({
     selector: '[fdNestedDirectivesTitle], [fd-nested-list-title]'
 })
 export class NestedListTitleDirective {
+
     /** @hidden */
     @HostBinding('class.fd-nested-list__title')
     fdNestedListTitleClass: boolean = true;
 
     /** @hidden */
-    constructor(private elementRef: ElementRef) {}
+    constructor(
+        private elementRef: ElementRef
+    ) {}
 
     /** Returns element's InnerText */
-    public getInnerText(): string {
+    getInnerText(): string {
         return this.elementRef && this.elementRef.nativeElement.innerText;
     }
 }
+
+@Directive({
+    selector: '[fdNestedListExpandIcon], [fd-nested-list-expand-icon]',
+    host: {
+        'aria-haspopup': 'true',
+        'tabindex': '-1'
+    }
+})
+export class NestedListExpandIconDirective {
+
+    /** @hidden */
+    @HostBinding('class.fd-nested-list__expand-icon')
+    fdNestedListTitleClass: boolean = true;
+
+    /**
+     * @hidden
+     * Attribute controlled by the parent `NestedItemDirective`
+     */
+    @HostBinding('class.is-expanded')
+    @HostBinding('attr.aria-expanded')
+    expanded: boolean = false;
+
+    constructor (
+        private _itemService: NestedItemService
+    ) {}
+
+    /** Mouse event handler */
+    @HostListener('click')
+    onClick(): void {
+        this.expanded = !this.expanded;
+        this._itemService.toggle.next(this.expanded);
+    }
+
+    /** Handler for focus events */
+    @HostListener('focus')
+    onFocus(): void {
+        this._itemService.focus.next();
+    }
+}
diff --git a/libs/core/src/lib/nested-list/nested-list-keyboard.service.spec.ts b/libs/core/src/lib/nested-list/nested-list-keyboard.service.spec.ts
index c8ce57b8df6..7adc847de66 100644
--- a/libs/core/src/lib/nested-list/nested-list-keyboard.service.spec.ts
+++ b/libs/core/src/lib/nested-list/nested-list-keyboard.service.spec.ts
@@ -1,5 +1,5 @@
 import { NestedListKeyboardService } from './nested-list-keyboard.service';
-import { MenuKeyboardService } from '@fundamental-ngx/core';
+import { MenuKeyboardService } from '../menu/menu-keyboard.service';
 import { Subject } from 'rxjs';
 
 class MockNestedLink {
@@ -48,25 +48,25 @@ describe('NestedListKeyboardSupportService', () => {
     });
 
     it('Should return all of the items', () => {
-        const resultItems = (service as any).getAllListItems(<any>object);
+        const resultItems = (service as any)._getAllListItems(<any>object);
 
         expect(resultItems.length).toBe(10);
     });
 
     it('Should handle focus other element', () => {
-        const items = (<any>service).getAllListItems(<any>object);
+        const items = (<any>service)._getAllListItems(<any>object);
 
         spyOn(items[1], 'focus').and.callThrough();
 
-        const keyboardEvent: any = { preventDefault: () => {}, key: 'ArrowRight' };
+        const keyboardEvent: any = { preventDefault: () => {}, key: 'ArrowDown' };
 
-        (<any>service).handleKeyDown(keyboardEvent, 0, items);
+        (<any>service)._handleKeyDown(keyboardEvent, 0, items);
 
         expect(items[1].focus).toHaveBeenCalled();
     });
 
     it('Should handle open trigger on element', () => {
-        const items = (<any>service).getAllListItems(<any>object);
+        const items = (<any>service)._getAllListItems(<any>object);
 
         items[0].expanded = false;
         items[0].hasChildren = true;
@@ -77,14 +77,14 @@ describe('NestedListKeyboardSupportService', () => {
 
         const keyboardEvent: any = { preventDefault: () => {}, key: 'ArrowRight' };
 
-        (<any>service).handleKeyDown(keyboardEvent, 0, items);
+        (<any>service)._handleKeyDown(keyboardEvent, 0, items);
 
         expect(items[1].focus).not.toHaveBeenCalled();
         expect(items[0].triggerOpen).toHaveBeenCalled();
     });
 
     it('Should handle close trigger on element', () => {
-        const items = (<any>service).getAllListItems(<any>object);
+        const items = (<any>service)._getAllListItems(<any>object);
 
         items[0].expanded = true;
         items[0].hasChildren = true;
@@ -95,38 +95,38 @@ describe('NestedListKeyboardSupportService', () => {
 
         const keyboardEvent: any = { preventDefault: () => {}, key: 'ArrowLeft' };
 
-        (<any>service).handleKeyDown(keyboardEvent, 0, items);
+        (<any>service)._handleKeyDown(keyboardEvent, 0, items);
 
         expect(items[9].focus).not.toHaveBeenCalled();
         expect(items[0].triggerClose).toHaveBeenCalled();
     });
 
     it('Should focus last element', () => {
-        const items = (<any>service).getAllListItems(<any>object);
+        const items = (<any>service)._getAllListItems(<any>object);
 
         items[0].expanded = false;
         items[0].hasChildren = true;
 
         spyOn(items[items.length - 1], 'focus').and.callThrough();
 
-        const keyboardEvent: any = { preventDefault: () => {}, key: 'ArrowLeft' };
+        const keyboardEvent: any = { preventDefault: () => {}, key: 'ArrowUp' };
 
-        (<any>service).handleKeyDown(keyboardEvent, 0, items);
+        (<any>service)._handleKeyDown(keyboardEvent, 0, items);
 
         expect(items[items.length - 1].focus).toHaveBeenCalled();
     });
 
     it('Should focus first element', () => {
-        const items = (<any>service).getAllListItems(<any>object);
+        const items = (<any>service)._getAllListItems(<any>object);
 
         items[items.length - 1].expanded = false;
         items[items.length - 1].hasChildren = false;
 
         spyOn(items[0], 'focus').and.callThrough();
 
-        const keyboardEvent: any = { preventDefault: () => {}, key: 'ArrowRight' };
+        const keyboardEvent: any = { preventDefault: () => {}, key: 'ArrowDown' };
 
-        (<any>service).handleKeyDown(keyboardEvent, items.length - 1, items);
+        (<any>service)._handleKeyDown(keyboardEvent, items.length - 1, items);
 
         expect(items[0].focus).toHaveBeenCalled();
     });
diff --git a/libs/core/src/lib/nested-list/nested-list-keyboard.service.ts b/libs/core/src/lib/nested-list/nested-list-keyboard.service.ts
index 2a5b2a1facc..4341088f67d 100644
--- a/libs/core/src/lib/nested-list/nested-list-keyboard.service.ts
+++ b/libs/core/src/lib/nested-list/nested-list-keyboard.service.ts
@@ -4,6 +4,7 @@ import { Inject, Injectable } from '@angular/core';
 import { takeUntil } from 'rxjs/operators';
 import { NestedItemInterface } from './nested-item/nested-item.interface';
 import { NestedListInterface } from './nested-list/nested-list.interface';
+import { KeyUtil } from '../utils/functions/key-util';
 
 /**
  * Nested list keyboard service, which uses MenuKeyboardService, to deal with ArrowUp, ArrowDown, Space, Enter.
@@ -11,49 +12,49 @@ import { NestedListInterface } from './nested-list/nested-list.interface';
  */
 @Injectable()
 export class NestedListKeyboardService {
-    constructor(@Inject(MenuKeyboardService) private keyboardService: MenuKeyboardService) {}
-
     /**
      * Event, that is thrown always, when the open/close i being called on item components.
      * Also triggers changing of elements, to remove closed/hidden elements
      */
     readonly refresh$: Subject<void> = new Subject<void>();
 
-    /** Recursive function to get all of the NestedItem elements in correct order. */
-    private getItems(item: NestedItemInterface): NestedItemInterface[] {
-        const childrenItems = item.expanded ? item.allChildrenItems : [];
-        return childrenItems.reduce(
-            (actualArray: NestedItemInterface[], nextItem: NestedItemInterface) => [
-                ...actualArray,
-                ...this.getItems(nextItem)
-            ],
-            [item]
-        );
-    }
+    constructor(@Inject(MenuKeyboardService) private keyboardService: MenuKeyboardService) {}
 
     /**
      * Function called after refresh$ event is triggered.
      * Refresh the list of NestedItems, that the keyboard support should be provided for
      */
-    public refreshItems(lists: NestedListInterface[]): void {
+    refreshItems(lists: NestedListInterface[]): void {
         const items: NestedItemInterface[] = [];
 
         /** Gathering all of the items */
-        lists.forEach((list) => items.push(...this.getAllListItems(list)));
+        lists.forEach((list) => items.push(...this._getAllListItems(list)));
         /** Putting the keyboard support function to each of the items */
         items.forEach((item, index) => {
             item.keyboardTriggered
                 .pipe(takeUntil(this.refresh$))
-                .subscribe((keyboardEvent: KeyboardEvent) => this.handleKeyDown(keyboardEvent, index, items));
+                .subscribe((keyboardEvent: KeyboardEvent) => this._handleKeyDown(keyboardEvent, index, items));
         });
     }
 
+    /** Recursive function to get all of the NestedItem elements in correct order. */
+    private _getItems(item: NestedItemInterface): NestedItemInterface[] {
+        const childrenItems = item.expanded ? item.allChildrenItems : [];
+        return childrenItems.reduce(
+            (actualArray: NestedItemInterface[], nextItem: NestedItemInterface) => [
+                ...actualArray,
+                ...this._getItems(nextItem)
+            ],
+            [item]
+        );
+    }
+
     /** Method that calls the recursive function, getItems() and gathers all of the items in the NestedList */
-    private getAllListItems(list: NestedListInterface): NestedItemInterface[] {
+    private _getAllListItems(list: NestedListInterface): NestedItemInterface[] {
         const _items: NestedItemInterface[] = [];
         if (list && list.nestedItems && list.nestedItems.length > 0) {
             list.nestedItems.forEach((item) => {
-                _items.push(...this.getItems(item));
+                _items.push(...this._getItems(item));
             });
         }
 
@@ -67,41 +68,21 @@ export class NestedListKeyboardService {
      * For ArrowLeft, if item is expanded and has children (list or popup), the close function is triggered.
      * Otherwise it follows ArrowUp functionality
      */
-    private handleKeyDown(keyboardEvent: KeyboardEvent, index: number, items: NestedItemInterface[]): void {
+    private _handleKeyDown(keyboardEvent: KeyboardEvent, index: number, items: NestedItemInterface[]): void {
         const item: NestedItemInterface = items[index];
 
-        switch (keyboardEvent.key) {
-            case 'ArrowRight': {
-                if (!item.expanded && item.hasChildren) {
-                    item.triggerOpen();
-                } else {
-                    if (items.length > index + 1) {
-                        items[index + 1].focus();
-                    } else {
-                        items[0].focus();
-                    }
-                    keyboardEvent.preventDefault();
-                }
-                break;
+        if (KeyUtil.isKey(keyboardEvent, 'ArrowRight')) {
+            if (!item.expanded && item.hasChildren) {
+                item.triggerOpen();
             }
-
-            case 'ArrowLeft': {
-                if (item.expanded && item.hasChildren) {
-                    item.triggerClose();
-                } else {
-                    if (index > 0) {
-                        items[index - 1].focus();
-                    } else {
-                        items[items.length - 1].focus();
-                    }
-                    keyboardEvent.preventDefault();
-                }
-                break;
-            }
-
-            default: {
-                this.keyboardService.keyDownHandler(keyboardEvent, index, items);
+            keyboardEvent.preventDefault();
+        } else if (KeyUtil.isKey(keyboardEvent, 'ArrowLeft')) {
+            if (item.expanded && item.hasChildren) {
+                item.triggerClose();
             }
+            keyboardEvent.preventDefault();
+        } else {
+            this.keyboardService.keyDownHandler(keyboardEvent, index, items);
         }
     }
 }
diff --git a/libs/core/src/lib/nested-list/nested-list-popover/nested-list-popover.component.html b/libs/core/src/lib/nested-list/nested-list-popover/nested-list-popover.component.html
index 476c296039c..6fd7857a702 100644
--- a/libs/core/src/lib/nested-list/nested-list-popover/nested-list-popover.component.html
+++ b/libs/core/src/lib/nested-list/nested-list-popover/nested-list-popover.component.html
@@ -1,16 +1,11 @@
-<fd-popover
-    [placement]="placement$ | async"
-    [triggers]="[]"
-    [noArrow]="false"
-    [isOpen]="open"
-    (isOpenChange)="handleOpenChange($event)"
->
+<fd-popover [placement]="placement$ | async" [triggers]="['click']" [noArrow]="false" [isOpen]="open" (isOpenChange)="handleOpenChange($event)">
     <fd-popover-control>
         <ng-content select="[fd-nested-list-link]"></ng-content>
+        <ng-content select="[fd-nested-list-content]"></ng-content>
     </fd-popover-control>
     <fd-popover-body class="fd-nested-list--text-only">
         <a fd-nested-list-link class="fd-nested-list__popover-header">
-            <span fd-nested-list-title>{{ linkDirective?.getTitle() }}</span>
+            <span fd-nested-list-title>{{title}}</span>
         </a>
         <ng-content select="[fd-nested-list]"></ng-content>
         <ng-content select="fd-prepared-nested-list"></ng-content>
diff --git a/libs/core/src/lib/nested-list/nested-list-popover/nested-list-popover.component.scss b/libs/core/src/lib/nested-list/nested-list-popover/nested-list-popover.component.scss
index 67d57c22191..30a7bfa2dee 100644
--- a/libs/core/src/lib/nested-list/nested-list-popover/nested-list-popover.component.scss
+++ b/libs/core/src/lib/nested-list/nested-list-popover/nested-list-popover.component.scss
@@ -1,11 +1,24 @@
 .fd-side-nav--condensed {
     .fd-popover-container-custom {
         .fd-nested-list__title {
-            display: inline-block;
+            display: inline-flex;
         }
     }
 
     .fd-nested-list__popover-header {
         box-shadow: 0 0 0.25rem 0 rgba(0, 0, 0, 0.15), inset 0 -0.0625rem 0 0 #d9d9d9;
     }
+
+    .fd-popover-custom {
+        display: block;
+    }
+
+    [dir="rtl"] &,
+    &[dir="rtl"] {
+        .fd-popover-container-custom {
+            .fd-nested-list__link {
+                padding-left: 1rem;
+            }
+        }
+    }
 }
diff --git a/libs/core/src/lib/nested-list/nested-list-popover/nested-list-popover.component.ts b/libs/core/src/lib/nested-list/nested-list-popover/nested-list-popover.component.ts
index 3e9508d4377..d4f334a04c6 100644
--- a/libs/core/src/lib/nested-list/nested-list-popover/nested-list-popover.component.ts
+++ b/libs/core/src/lib/nested-list/nested-list-popover/nested-list-popover.component.ts
@@ -1,4 +1,14 @@
-import { Component, ContentChild, HostBinding, ViewChild, ViewEncapsulation, Optional } from '@angular/core';
+import {
+    AfterContentInit,
+    ChangeDetectionStrategy,
+    Component,
+    ContentChild,
+    HostBinding,
+    Input,
+    Optional,
+    ViewChild,
+    ViewEncapsulation
+} from '@angular/core';
 import { Observable, of } from 'rxjs';
 
 import { NestedLinkDirective } from '../nested-link/nested-link.directive';
@@ -9,16 +19,22 @@ import { map } from 'rxjs/operators';
 import { NestedItemInterface } from '../nested-item/nested-item.interface';
 import { NestedItemService } from '../nested-item/nested-item.service';
 import { NestedListPopoverInterface } from './nested-list-popover.interface';
+import { NestedListContentDirective } from '../nested-content/nested-list-content.directive';
 
 @Component({
     selector: 'fd-nested-list-popover',
     templateUrl: './nested-list-popover.component.html',
     styleUrls: ['./nested-list-popover.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class NestedListPopoverComponent implements NestedListPopoverInterface {
-    /** @hidden */
-    placement$: Observable<string>;
+export class NestedListPopoverComponent implements NestedListPopoverInterface, AfterContentInit {
+
+    /** @hidden
+     * For Internal Usage - Gets information about title, which should be displayed inside popover
+     */
+    @Input()
+    title: string = '';
 
     /** @hidden */
     @ViewChild(PopoverComponent)
@@ -32,15 +48,20 @@ export class NestedListPopoverComponent implements NestedListPopoverInterface {
     @ContentChild(NestedLinkDirective)
     linkDirective: NestedLinkDirective;
 
+    /** @hidden */
+    @ContentChild(NestedListContentDirective)
+    contentDirective: NestedListContentDirective;
+
     /**
      * @hidden
      * Reference to parent item, to propagate open and close change from popover.
      */
     parentItemElement: NestedItemInterface;
 
-    /**
-     * @hidden
-     */
+    /** @hidden */
+    placement$: Observable<string>;
+
+    /** @hidden */
     open: boolean = false;
 
     /** @hidden */
@@ -56,6 +77,13 @@ export class NestedListPopoverComponent implements NestedListPopoverInterface {
         }
     }
 
+    /** @hidden */
+    ngAfterContentInit(): void {
+        if (!this.title) {
+            this.title = this._getTitle();
+        }
+    }
+
     /**
      * Method called, when open state is changed, from popover component (escape key, outside click).
      */
@@ -70,6 +98,15 @@ export class NestedListPopoverComponent implements NestedListPopoverInterface {
         }
     }
 
+    /** Returns title of nested link element inside content directive */
+    private _getTitle(): string {
+        if (this.contentDirective && this.contentDirective.nestedLink) {
+            return this.contentDirective.nestedLink.getTitle();
+        } else {
+            return '';
+        }
+    }
+
     /** @hidden */
     private _listenOnKeyboardRefresh(): void {
         this._keyboardNestService.refresh$.subscribe(() => {
@@ -83,7 +120,7 @@ export class NestedListPopoverComponent implements NestedListPopoverInterface {
     /** @hidden */
     private _createRtlObservable(): void {
         this.placement$ = this._rtlService
-            ? this._rtlService.rtl.pipe(map((isRtl) => (isRtl ? 'left-start' : 'right-start')))
+            ? this._rtlService.rtl.pipe(map(isRtl => isRtl ? 'left-start' : 'right-start'))
             : of('right-start');
     }
 }
diff --git a/libs/core/src/lib/nested-list/nested-list-state.service.ts b/libs/core/src/lib/nested-list/nested-list-state.service.ts
index 5fe2e1e12ce..ea001dc19e7 100644
--- a/libs/core/src/lib/nested-list/nested-list-state.service.ts
+++ b/libs/core/src/lib/nested-list/nested-list-state.service.ts
@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
 
 @Injectable()
 export class NestedListStateService {
@@ -7,4 +8,12 @@ export class NestedListStateService {
      * The condensed state is modified by the parent and read by nested lists.
      */
     condensed: boolean = false;
+
+    /**
+     * @hidden
+     */
+    selectable: boolean = true;
+
+    /** @hidden */
+    onSelected: Subject<string> = new Subject<string>();
 }
diff --git a/libs/core/src/lib/nested-list/nested-list.module.ts b/libs/core/src/lib/nested-list/nested-list.module.ts
index d10fc387474..d66a9649135 100644
--- a/libs/core/src/lib/nested-list/nested-list.module.ts
+++ b/libs/core/src/lib/nested-list/nested-list.module.ts
@@ -2,7 +2,12 @@ import { NgModule } from '@angular/core';
 import { NestedListDirective } from './nested-list/nested-list.directive';
 import { NestedLinkDirective } from './nested-link/nested-link.directive';
 import { NestedItemDirective } from './nested-item/nested-item.directive';
-import { NestedListHeaderDirective, NestedListIconDirective, NestedListTitleDirective } from './nested-list-directives';
+import {
+    NestedListExpandIconDirective,
+    NestedListHeaderDirective,
+    NestedListIconDirective,
+    NestedListTitleDirective
+} from './nested-list-directives';
 import { MenuKeyboardService } from '../menu/menu-keyboard.service';
 import { CommonModule } from '@angular/common';
 import { NestedListKeyboardService } from './nested-list-keyboard.service';
@@ -11,9 +16,14 @@ import { NestedListPopoverComponent } from './nested-list-popover/nested-list-po
 import { PreparedNestedListComponent } from './prepared-nested-list/prepared-nested-list.component';
 import { NestedListStateService } from './nested-list-state.service';
 import { RouterModule } from '@angular/router';
+import { NestedListContentDirective } from './nested-content/nested-list-content.directive';
 
 @NgModule({
-    imports: [CommonModule, PopoverModule, RouterModule],
+    imports: [
+        CommonModule,
+        PopoverModule,
+        RouterModule
+    ],
     declarations: [
         NestedListDirective,
         NestedLinkDirective,
@@ -22,7 +32,9 @@ import { RouterModule } from '@angular/router';
         NestedListTitleDirective,
         NestedListHeaderDirective,
         NestedListPopoverComponent,
-        PreparedNestedListComponent
+        PreparedNestedListComponent,
+        NestedListExpandIconDirective,
+        NestedListContentDirective
     ],
     exports: [
         NestedListDirective,
@@ -32,8 +44,14 @@ import { RouterModule } from '@angular/router';
         NestedListTitleDirective,
         NestedListHeaderDirective,
         NestedListPopoverComponent,
-        PreparedNestedListComponent
+        PreparedNestedListComponent,
+        NestedListExpandIconDirective,
+        NestedListContentDirective
     ],
-    providers: [MenuKeyboardService, NestedListKeyboardService, NestedListStateService]
+    providers: [
+        MenuKeyboardService,
+        NestedListKeyboardService,
+        NestedListStateService
+    ]
 })
 export class NestedListModule {}
diff --git a/libs/core/src/lib/nested-list/nested-list/nested-list.directive.spec.ts b/libs/core/src/lib/nested-list/nested-list/nested-list.directive.spec.ts
index 723fb8e9ec7..7423e33e201 100644
--- a/libs/core/src/lib/nested-list/nested-list/nested-list.directive.spec.ts
+++ b/libs/core/src/lib/nested-list/nested-list/nested-list.directive.spec.ts
@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { MenuKeyboardService } from '@fundamental-ngx/core';
+import { MenuKeyboardService } from '../../menu/menu-keyboard.service';
 import { NestedListModule } from '../nested-list.module';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NestedListKeyboardService } from '../nested-list-keyboard.service';
diff --git a/libs/core/src/lib/nested-list/nested-list/nested-list.directive.ts b/libs/core/src/lib/nested-list/nested-list/nested-list.directive.ts
index 5b929f78598..666916b4c40 100644
--- a/libs/core/src/lib/nested-list/nested-list/nested-list.directive.ts
+++ b/libs/core/src/lib/nested-list/nested-list/nested-list.directive.ts
@@ -1,5 +1,6 @@
 import {
     AfterContentInit,
+    ChangeDetectorRef,
     ContentChildren,
     Directive,
     ElementRef,
@@ -19,9 +20,6 @@ import { NestedListInterface } from './nested-list.interface';
     selector: '[fdNestedList], [fd-nested-list]'
 })
 export class NestedListDirective implements AfterContentInit, NestedListInterface {
-    /** @hidden */
-    @HostBinding('class.fd-nested-list')
-    fdNestedListItemClass: boolean = true;
 
     /** In case the user wants to no use icons for items in this list */
     @Input()
@@ -33,6 +31,14 @@ export class NestedListDirective implements AfterContentInit, NestedListInterfac
     @HostBinding('class.fd-nested-list--compact')
     compact: boolean = false;
 
+    /** @hidden */
+    @HostBinding('class.fd-nested-list')
+    fdNestedListItemClass: boolean = true;
+
+    /** @hidden */
+    @HostBinding('attr.aria-hidden')
+    hidden: boolean = false;
+
     /**
      * @hidden
      * This variable is mostly to keep track of this list's children. There is not usage of it inside this directive,
@@ -41,16 +47,13 @@ export class NestedListDirective implements AfterContentInit, NestedListInterfac
     @ContentChildren(forwardRef(() => NestedItemDirective))
     nestedItems: QueryList<NestedItemDirective>;
 
-    /** @hidden */
-    @HostBinding('attr.aria-hidden')
-    public hidden: boolean = false;
-
     /** @hidden */
     constructor(
         @Optional() private _nestedItemService: NestedItemService,
         private _nestedListStateService: NestedListStateService,
         private _nestedListKeyboardService: NestedListKeyboardService,
-        private _elementRef: ElementRef
+        private _elementRef: ElementRef,
+        private _changeDetectionRef: ChangeDetectorRef
     ) {
         if (this._nestedItemService) {
             this._nestedItemService.list = this;
@@ -59,17 +62,22 @@ export class NestedListDirective implements AfterContentInit, NestedListInterfac
 
     /** @hidden */
     ngAfterContentInit(): void {
-        let nestedLevel: number = this.getNestedLevel();
+        let nestedLevel: number = this._getNestedLevel();
         /** If there is condensed mode, maximum 2nd level class of nest can be added */
         if (this._nestedListStateService.condensed) {
             nestedLevel = Math.min(...[nestedLevel, 2]);
         }
         this.nestedItems.changes.subscribe(() => this._nestedListKeyboardService.refresh$.next());
-        this.handleNestedLevel(nestedLevel);
+        this._handleNestedLevel(nestedLevel);
+    }
+
+    /** @hidden */
+    detectChanges(): void {
+        this._changeDetectionRef.markForCheck();
     }
 
     /** @hidden */
-    private handleNestedLevel(level: number): void {
+    private _handleNestedLevel(level: number): void {
         /** Adding class with the nested level */
         this._elementRef.nativeElement.classList.add('level-' + level);
     }
@@ -78,7 +86,7 @@ export class NestedListDirective implements AfterContentInit, NestedListInterfac
      * @hidden
      * Method, that checks how deep is the list element
      */
-    private getNestedLevel(): number {
+    private _getNestedLevel(): number {
         let element = this._elementRef.nativeElement;
         const parentElements = [];
 
@@ -89,7 +97,7 @@ export class NestedListDirective implements AfterContentInit, NestedListInterfac
         }
 
         /** Filter only elements, that has `fd-nested-list` directive attribute */
-        const filteredParentElements = parentElements.filter((_element) => _element.hasAttribute('fd-nested-list'));
+        const filteredParentElements = parentElements.filter(_element => _element.hasAttribute('fd-nested-list'));
         return filteredParentElements.length;
     }
 }
diff --git a/libs/core/src/lib/nested-list/nested-list/nested-list.interface.ts b/libs/core/src/lib/nested-list/nested-list/nested-list.interface.ts
index 4914f309e88..626c84e0509 100644
--- a/libs/core/src/lib/nested-list/nested-list/nested-list.interface.ts
+++ b/libs/core/src/lib/nested-list/nested-list/nested-list.interface.ts
@@ -5,4 +5,5 @@ import { NestedItemInterface } from '../nested-item/nested-item.interface';
 export interface NestedListInterface {
     nestedItems: QueryList<NestedItemInterface>;
     hidden: boolean;
+    detectChanges: Function;
 }
diff --git a/libs/core/src/lib/nested-list/prepared-nested-list/prepared-nested-list.component.html b/libs/core/src/lib/nested-list/prepared-nested-list/prepared-nested-list.component.html
index 70b93109018..7fcca72a270 100644
--- a/libs/core/src/lib/nested-list/prepared-nested-list/prepared-nested-list.component.html
+++ b/libs/core/src/lib/nested-list/prepared-nested-list/prepared-nested-list.component.html
@@ -1,38 +1,43 @@
 <ul fd-nested-list [textOnly]="list?.textOnly">
     <ng-container *ngFor="let item of list?.items">
         <li *ngIf="item.headerTitle" fd-nested-list-header>
-            {{ item.headerTitle }}
+            {{item.headerTitle}}
         </li>
-        <li *ngIf="!item.headerTitle" fd-nested-list-item [(expanded)]="item.expanded">
-            <fd-nested-list-popover *ngIf="condensed && first && item.list">
-                <a
-                    fd-nested-list-link
-                    *ngIf="item.link"
-                    [onClickCallback]="item.link.callback"
-                    [selected]="item.link.selected"
-                    [attr.href]="item.link.href ? item.link.href : null"
-                    [routerLink]="item.link.routerLink ? item.link.routerLink : []"
-                >
-                    <span fd-nested-list-icon *ngIf="item.link.icon" [glyph]="item.link.icon"></span>
-                    <span fd-nested-list-title>{{ item.link.title }}</span>
-                </a>
+        <li *ngIf="!item.headerTitle"
+            fd-nested-list-item
+            [(expanded)]="item.expanded">
+
+            <fd-nested-list-popover *ngIf="condensed && first && item.list" [title]="item.link?.title">
+                <div fd-nested-list-content [selected]="item.link.selected">
+                    <ng-container [ngTemplateOutlet]="link" [ngTemplateOutletContext]="{item: item}"></ng-container>
+                    <button fd-nested-list-expand-icon></button>
+                </div>
                 <fd-prepared-nested-list [first]="false" *ngIf="item.list" [list]="item.list"></fd-prepared-nested-list>
             </fd-nested-list-popover>
 
-            <ng-container *ngIf="!condensed || !first || !item.list">
-                <a
-                    fd-nested-list-link
-                    *ngIf="item.link"
-                    [onClickCallback]="item.link.callback"
-                    [selected]="item.link.selected"
-                    [attr.href]="item.link.href ? item.link.href : null"
-                    [routerLink]="item.link.routerLink ? item.link.routerLink : []"
-                >
-                    <span fd-nested-list-icon *ngIf="item.link.icon" [glyph]="item.link.icon"></span>
-                    <span fd-nested-list-title>{{ item.link.title }}</span>
-                </a>
+            <ng-container *ngIf="!item.list">
+                <ng-container [ngTemplateOutlet]="link" [ngTemplateOutletContext]="{item: item}"></ng-container>
+            </ng-container>
+
+            <ng-container *ngIf="(!condensed || !first) && item.list">
+                <div fd-nested-list-content>
+                    <ng-container [ngTemplateOutlet]="link" [ngTemplateOutletContext]="{item: item}"></ng-container>
+                    <button fd-nested-list-expand-icon></button>
+                </div>
                 <fd-prepared-nested-list [first]="false" *ngIf="item.list" [list]="item.list"></fd-prepared-nested-list>
             </ng-container>
+
+
+            <ng-template let-item="item" #link>
+                <a fd-nested-list-link *ngIf="item.link"
+                   [onClickCallback]="item.link.callback"
+                   [(selected)]="!item.list && item.link.selected"
+                   [attr.href]="item.link.href ? item.link.href : null"
+                   [routerLink]="item.link.routerLink ? item.link.routerLink : []">
+                    <span fd-nested-list-icon *ngIf="item.link.icon" [glyph]="item.link.icon"></span>
+                    <span fd-nested-list-title>{{item.link.title}}</span>
+                </a>
+            </ng-template>
         </li>
     </ng-container>
 </ul>
diff --git a/libs/core/src/lib/nested-list/prepared-nested-list/prepared-nested-list.component.ts b/libs/core/src/lib/nested-list/prepared-nested-list/prepared-nested-list.component.ts
index 581614050d1..fc7cb6dbdce 100644
--- a/libs/core/src/lib/nested-list/prepared-nested-list/prepared-nested-list.component.ts
+++ b/libs/core/src/lib/nested-list/prepared-nested-list/prepared-nested-list.component.ts
@@ -1,4 +1,12 @@
-import { AfterViewInit, ChangeDetectorRef, Component, forwardRef, Input, Optional, ViewChild } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    Input,
+    Optional,
+    ViewChild,
+    ViewEncapsulation
+} from '@angular/core';
 import { NestedListDirective } from '../nested-list/nested-list.directive';
 import { NestedListModel } from '../nested-list-model';
 import { NestedItemService } from '../nested-item/nested-item.service';
@@ -9,9 +17,12 @@ import { NestedItemService } from '../nested-item/nested-item.service';
 @Component({
     selector: 'fd-prepared-nested-list',
     templateUrl: './prepared-nested-list.component.html',
-    styleUrls: ['./prepared-nested-list.component.scss']
+    styleUrls: ['./prepared-nested-list.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class PreparedNestedListComponent implements AfterViewInit {
+export class PreparedNestedListComponent {
+
     /**
      * @hidden
      * For internal usage.
@@ -20,15 +31,11 @@ export class PreparedNestedListComponent implements AfterViewInit {
     @Input()
     first: boolean = true;
 
-    /**
-     * Defines if list should be displayed in condensed mode
-     */
+    /** Defines if list should be displayed in condensed mode */
     @Input()
     condensed: boolean = false;
 
-    /**
-     * List configuration
-     */
+    /** List configuration*/
     @Input()
     list: NestedListModel;
 
@@ -47,15 +54,7 @@ export class PreparedNestedListComponent implements AfterViewInit {
     }
 
     /** @hidden */
-    constructor(private _changeDetRef: ChangeDetectorRef, @Optional() private _nestedItemService: NestedItemService) {}
-
-    /** @hidden */
-    ngAfterViewInit(): void {
-        this._changeDetRef.detectChanges();
-
-        /** If any item above, pass list directive reference to it */
-        if (this._nestedItemService) {
-            this._nestedItemService.list = this.nestedListDirective;
-        }
-    }
+    constructor(
+        @Optional() private _nestedItemService: NestedItemService
+    ) {}
 }
diff --git a/libs/core/src/lib/select/select.component.spec.ts b/libs/core/src/lib/select/select.component.spec.ts
index e7a72078871..eaf47d0772d 100644
--- a/libs/core/src/lib/select/select.component.spec.ts
+++ b/libs/core/src/lib/select/select.component.spec.ts
@@ -222,7 +222,7 @@ describe('SelectComponent', () => {
     }));
 
     it('Should support arrows navigation', fakeAsync(() => {
-        const options: OptionComponent[] = component.options.toArray();
+        const options: any = component.options.toArray();
         component.open();
 
         fixture.detectChanges();
diff --git a/libs/core/src/lib/side-navigation/side-navigation.component.scss b/libs/core/src/lib/side-navigation/side-navigation.component.scss
index 3e0a995fe5d..a5cf5054675 100644
--- a/libs/core/src/lib/side-navigation/side-navigation.component.scss
+++ b/libs/core/src/lib/side-navigation/side-navigation.component.scss
@@ -5,12 +5,9 @@
 
     .fd-nested-list__link {
         cursor: pointer;
+    }
 
-        &:focus {
-            outline-offset: -0.125rem;
-            outline-width: var(--sapContent_FocusWidth, 0.0625rem);
-            outline-color: var(--sapContent_FocusColor, #000);
-            outline-style: var(--sapContent_FocusStyle, dotted);
-        }
+    .fd-nested-list__expand-icon {
+        background-color: transparent;
     }
 }
diff --git a/libs/core/src/lib/side-navigation/side-navigation.component.spec.ts b/libs/core/src/lib/side-navigation/side-navigation.component.spec.ts
index 84059b4f4e7..191aadf2201 100644
--- a/libs/core/src/lib/side-navigation/side-navigation.component.spec.ts
+++ b/libs/core/src/lib/side-navigation/side-navigation.component.spec.ts
@@ -1,20 +1,142 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
 
 import { SideNavigationComponent } from './side-navigation.component';
+import { Component, ViewChild } from '@angular/core';
+import { NestedListModule } from '../nested-list/nested-list.module';
+import { MenuKeyboardService } from '../menu/menu-keyboard.service';
+import { SideNavigationMainDirective } from './side-navigation-main.directive';
+
+@Component({
+    template: `
+        <fd-side-nav>
+            <div fd-side-nav-main>
+                <ul fd-nested-list [textOnly]="true">
+                    <li fd-nested-list-item>
+                        <a fd-nested-list-link>
+                            <span fd-nested-list-title>Link 1</span>
+                        </a>
+                    </li>
+                    <li fd-nested-list-item>
+                        <a fd-nested-list-link>
+                            <span fd-nested-list-title>Link 2</span>
+                        </a>
+                    </li>
+                    <li fd-nested-list-item [expanded]="expanded">
+                        <div fd-nested-list-content>
+                            <a fd-nested-list-link>
+                                <span fd-nested-list-title>Link 3</span>
+                            </a>
+                            <button fd-nested-list-expand-icon></button>
+                        </div>
+                        <ul fd-nested-list>
+                            <li fd-nested-list-item>
+                                <a fd-nested-list-link>
+                                    <span fd-nested-list-title>Link 4</span>
+                                </a>
+                            </li>
+                            <li fd-nested-list-item>
+                                <a fd-nested-list-link>
+                                    <span fd-nested-list-title>Link 5</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                    <li fd-nested-list-item [expanded]="true">
+                        <div fd-nested-list-content>
+                            <a fd-nested-list-link>
+                                <span fd-nested-list-title>Link 6</span>
+                            </a>
+                            <button fd-nested-list-expand-icon></button>
+                        </div>
+                        <ul fd-nested-list>
+                            <li fd-nested-list-item>
+                                <a fd-nested-list-link>
+                                    <span fd-nested-list-title>Link 7</span>
+                                </a>
+                            </li>
+                            <li fd-nested-list-item [expanded]="expanded">
+                                <div fd-nested-list-content>
+                                    <a fd-nested-list-link>
+                                        <span fd-nested-list-title>Link 6</span>
+                                    </a>
+                                    <button fd-nested-list-expand-icon></button>
+                                </div>
+                                <ul fd-nested-list>
+                                    <li fd-nested-list-item>
+                                        <a fd-nested-list-link>
+                                            <span fd-nested-list-title>Link 4</span>
+                                        </a>
+                                    </li>
+                                    <li fd-nested-list-item>
+                                        <a fd-nested-list-link>
+                                            <span fd-nested-list-title>Link 5</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </li>
+                    <li fd-nested-list-item>
+                        <a fd-nested-list-link>
+                            <span fd-nested-list-title>Link 4</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </fd-side-nav>
+    `
+})
+class TestNestedContainerComponent {
+
+    @ViewChild(SideNavigationComponent)
+    sideNav: SideNavigationComponent;
+
+    expanded: boolean = false;
+
+}
 
 describe('SideNavigationComponent', () => {
-    let component: SideNavigationComponent;
-    let fixture: ComponentFixture<SideNavigationComponent>;
+    let component: TestNestedContainerComponent;
+    let fixture: ComponentFixture<TestNestedContainerComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [SideNavigationComponent]
+            imports: [NestedListModule],
+            declarations: [SideNavigationComponent, SideNavigationMainDirective, TestNestedContainerComponent],
+            providers: [MenuKeyboardService]
         }).compileComponents();
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(SideNavigationComponent);
+        fixture = TestBed.createComponent(TestNestedContainerComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });
+
+    it('should have not hidden items in list', fakeAsync(() => {
+        fixture.whenStable().then(() => {
+            component.sideNav.ngAfterContentInit();
+            fixture.detectChanges();
+            const anyComponent: any = component.sideNav;
+            expect(
+                anyComponent.keyboardService._getAllListItems(
+                    anyComponent.getLists()[0]
+                ).length
+            ).toBe(7);
+        });
+    }));
+
+    it('should have expanded items in list', fakeAsync(() => {
+        component.expanded = true;
+        fixture.whenStable().then(() => {
+            component.sideNav.ngAfterContentInit();
+            fixture.detectChanges();
+            const anyComponent: any = component.sideNav;
+            expect(
+                anyComponent.keyboardService._getAllListItems(
+                    anyComponent.getLists()[0]
+                ).length
+            ).toBe(11);
+        });
+    }));
 });
diff --git a/libs/core/src/lib/side-navigation/side-navigation.component.ts b/libs/core/src/lib/side-navigation/side-navigation.component.ts
index 07694646254..ea20e594bb4 100644
--- a/libs/core/src/lib/side-navigation/side-navigation.component.ts
+++ b/libs/core/src/lib/side-navigation/side-navigation.component.ts
@@ -1,6 +1,5 @@
 import {
-    AfterContentInit,
-    ChangeDetectionStrategy,
+    AfterContentInit, AfterViewInit,
     Component,
     ContentChild,
     HostBinding,
@@ -27,10 +26,10 @@ import { NestedListStateService } from '../nested-list/nested-list-state.service
     selector: 'fd-side-nav',
     styleUrls: ['side-navigation.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [NestedListKeyboardService, NestedListStateService]
+    providers: [ NestedListKeyboardService, NestedListStateService ]
 })
-export class SideNavigationComponent implements AfterContentInit, OnInit {
+export class SideNavigationComponent implements AfterContentInit, AfterViewInit, OnInit {
+
     /**
      * Side navigation configuration, to pass whole model object, instead of creating HTML from scratch
      */
@@ -42,6 +41,12 @@ export class SideNavigationComponent implements AfterContentInit, OnInit {
     @HostBinding('class.fd-side-nav--condensed')
     condensed: boolean = false;
 
+    /** Whether clicking on elements should change selected state of items */
+    @Input()
+    set selectable(selectable: boolean) {
+        this.nestedListState.selectable = selectable
+    }
+
     /** @hidden */
     @ContentChild(SideNavigationUtilityDirective)
     sideNavUtility: SideNavigationUtilityDirective;
@@ -54,23 +59,36 @@ export class SideNavigationComponent implements AfterContentInit, OnInit {
     preparedNestedList: QueryList<PreparedNestedListComponent>;
 
     /** @hidden */
-    constructor(private keyboardService: NestedListKeyboardService, private nestedListState: NestedListStateService) {
-        this.keyboardService.refresh$.subscribe(() =>
+    constructor(
+        private keyboardService: NestedListKeyboardService,
+        private nestedListState: NestedListStateService
+    ) {
+        this.keyboardService.refresh$.subscribe(() => {
             /** Refresh list of elements, that are being supported by keyboard */
             this.keyboardService.refreshItems(this.getLists())
-        );
+        });
     }
 
     /** @hidden */
     ngOnInit(): void {
         /** Set up condensed state */
-        this.nestedListState.condensed =
-            this.condensed || (this.sideNavigationConfiguration && this.sideNavigationConfiguration.condensed);
+        this.nestedListState.condensed = this.condensed ||
+            (this.sideNavigationConfiguration && this.sideNavigationConfiguration.condensed)
+        ;
     }
 
     /** @hidden */
     ngAfterContentInit(): void {
-        this.keyboardService.refreshItems(this.getLists());
+        if (!this.sideNavigationConfiguration) {
+            this.keyboardService.refreshItems(this.getLists());
+        }
+    }
+
+    /** @hidden */
+    ngAfterViewInit(): void {
+        if (this.sideNavigationConfiguration) {
+            this.keyboardService.refreshItems(this.getLists());
+        }
     }
 
     /**
@@ -78,6 +96,7 @@ export class SideNavigationComponent implements AfterContentInit, OnInit {
      * Method that returns 1 deep level of lists.
      */
     private getLists(): NestedListDirective[] {
+
         const lists: NestedListDirective[] = [];
 
         if (this.sideNavMain) {
@@ -87,7 +106,7 @@ export class SideNavigationComponent implements AfterContentInit, OnInit {
             lists.push(this.sideNavUtility.list);
         }
         if (this.preparedNestedList) {
-            lists.push(...this.preparedNestedList.map((preparedNested) => preparedNested.nestedListDirective));
+            lists.push(...this.preparedNestedList.map(preparedNested => preparedNested.nestedListDirective));
         }
 
         return lists;
diff --git a/package-lock.json b/package-lock.json
index 6040a8252e3..2257564d98f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11691,9 +11691,9 @@
       "dev": true
     },
     "fundamental-styles": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/fundamental-styles/-/fundamental-styles-0.8.1.tgz",
-      "integrity": "sha512-lP29Hi4esdf9lOa3l1uMncTjnROR9sLjxM27InrztADa228H8Ry5LRqI7nJJTEfqo/e53QKVRjbZo3B1+hqqFg=="
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/fundamental-styles/-/fundamental-styles-0.9.0.tgz",
+      "integrity": "sha512-NYzbhOaTvOXUOKoyHseZXuDoORkf1tiCcATMCsdzsLhofk0gd/lceOypLsPrKoM2lU+vXy7sGQIsmf0b0UfBbA=="
     },
     "fuse.js": {
       "version": "3.6.1",
diff --git a/package.json b/package.json
index e14bae427b7..ce7f589248c 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,7 @@
     "core-js": "3.6.5",
     "flexboxgrid": "6.3.1",
     "focus-trap": "5.1.0",
-    "fundamental-styles": "0.8.1",
+    "fundamental-styles": "0.9.0",
     "highlight.js": "9.18.1",
     "intl": "^1.2.5",
     "jasminewd2": "2.2.0",