title: Angular 4 - Display Current Navigation from SharePoint on website
body: <p>I created new SharePoint Current Navigation - Share Point Academy -> Site Settings -> Navigation -> Structural Navigation: Editing and Sorting</p>
  
  <p>and now I see that navigation on the left sidebar and that's ok, but I don't know how to display that navigation as dropdown on my website... </p>
  
  <p><a href="https://i.stack.imgur.com/2rqfo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2rqfo.png" alt="enter image description here"></a></p>
  
  <p>For example, I have these two dropdown (Reiseplanung and Administration), and dropdown menu items as you can see on the image. I need to create two Bootstrap dropdown menu items with appropriate dropdown submenu items. </p>
  
  <p>Is there any way to do that? Every help is appreciated </p>
  
  <p><strong>navBar.component.html</strong></p>
  
  <pre><code>&lt;div class="col-sm-12 navbar-wrapper"&gt;
  &lt;div class="icon"&gt;
  &lt;a href="#" (click)="goBack()"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="icon"&gt;
  &lt;a href="#" (click)="openCalendar()"&gt;
      &lt;span class="glyphicon glyphicon-home" aria-hidden="true"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="icon"&gt;
  &lt;a href="#" (click)="travelRequestsList()"&gt;
      &lt;span class="glyphicon glyphicon-align-justify" aria-hidden="true"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="icon"&gt;
  &lt;a href="#" (click)="newtravelRequest()"&gt;
      &lt;span class="glyphicon glyphicon-plus" aria-hidden="true"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="btn-group" dropdown&gt; &lt;-- **Dropdown from SharePoint should be here**
      &lt;button dropdownToggle type="button" class="btn btn-primary dropdown-toggle"&gt;
          Navigation &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul *dropdownMenu class="dropdown-menu" role="menu"&gt;
          &lt;li role="menuitem"&gt;
              &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
          &lt;/li&gt;
          &lt;li role="menuitem"&gt;
              &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
          &lt;/li&gt;
          &lt;li role="menuitem"&gt;
              &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
          &lt;/li&gt;
          &lt;li role="menuitem"&gt;
              &lt;a class="dropdown-item" href="#"&gt;Separated link&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>navBar.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  
    declare var _spPageContextInfo;
  
     @Component({
      selector: 'rp-navbar',
      templateUrl: './navBar.component.html',
      styleUrls: ['./navBar.component.css'],
      providers: []
    })
    export class NavBarComponent implements OnInit {
  
     constructor() { }
  
     /**
     * Component is initialized. (Angular lifecycle hook)
     */
     ngOnInit() {
  
     }
  
     /**
      * Back to the last accessed page.
      */
     goBack() {
        window.history.back();
     }
  
    /**
     * Back to Landing Page (Calendar)
     */
     openCalendar() {
       window.location.href = _spPageContextInfo.webAbsoluteUrl + 
      "/SiteAssets/Pages/home.aspx#/home";
    }
  
   /**
    * Back to list of my travel requests
    */
    travelRequestsList() {
       window.location.href = _spPageContextInfo.webAbsoluteUrl + 
    "/SiteAssets/Pages/listview.aspx#/listview";
   }
  
  /**
   * Create new travel request
   */
   newtravelRequest() {
       window.location.href = _spPageContextInfo.webAbsoluteUrl + 
    "/SiteAssets/Pages/edit.aspx#/edit";
    }
  }
  </code></pre>
  
  <p><strong>navBar.component.css</strong></p>
  
  <pre><code>.navbar-wrapper {
      display: flex;
      align-items: center;
      background: #eee;
      padding-top: 11px;
      padding-bottom: 11px;
      margin: 20px 0px 50px;
    }
  
  .icon {
     display: inline-block;
     font-size: 20px;
     margin-right: 25px;
   }
  
   .icon a {
     color: #000000;
    }
  
   .icon:last-child {
      margin-right: 0px;
    }
  </code></pre>