# Navigation inside ion-side-menu

**URL:** <https://forum.ionicframework.com/t/navigation-inside-ion-side-menu/69553>\
**Category:** ionic-v1\
**Created:** [November 8, 2016, 1:42pm UTC](https://forum.ionicframework.com/t/navigation-inside-ion-side-menu/69553 "2016-11-08T13:42:47Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![fabianors](https://avatars.discourse-cdn.com/v4/letter/f/7ea924/32.png) [@fabianors](https://forum.ionicframework.com/u/fabianors)\
**Post date:** [November 8, 2016, 1:42pm UTC](https://forum.ionicframework.com/t/navigation-inside-ion-side-menu/69553/1 "2016-11-08T13:42:47Z")

</div>

Hello, I am wondering if it is possible to have a navigation inside the ion-side-menu. I have the following structure in my ion-side-menu:

```
  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item href="#/menu/outbox" class="font-left-menu item-icon-right">
          Outbox <i class="icon ion-chevron-right icon-acessory accessory-size"></i>
        </ion-item>
        <br>
        <ion-item href="#/menu/settings" class="font-left-menu item-icon-right">
          Settings <i class="icon ion-chevron-right icon-acessory accessory-size"></i>
        </ion-item>
        <ion-item href="#/menu/about" class="font-left-menu item-icon-right">
          About <i class="icon ion-chevron-right icon-acessory accessory-size"></i>
        </ion-item>
        <br>
        <ion-item menu-close href="#/logout">
          Exit
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>

```

And what I would like to do is navigate to an inner page (inside the proper menu). Something like what you can see here:

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/2/d/2d4f9172ef06b87f2641d46830f8c2df652252fe.png)

I have read a lot of people talking about the navigation in the main content area, but what I am trying to do is navigate in the side menu view.

---

<div class="post-metadata">

**Author:** ![bok04](https://avatars.discourse-cdn.com/v4/letter/b/898d66/32.png) [@bok04](https://forum.ionicframework.com/u/bok04)\
**Post date:** [March 7, 2017, 9:54am UTC](https://forum.ionicframework.com/t/navigation-inside-ion-side-menu/69553/2 "2017-03-07T09:54:45Z")

</div>

Where you able to solve this? I’m looking at doing the same at the moment

---

<div class="post-metadata">

**Author:** ![fabianors](https://avatars.discourse-cdn.com/v4/letter/f/7ea924/32.png) [@fabianors](https://forum.ionicframework.com/u/fabianors)\
**Post date:** [March 7, 2017, 11:44am UTC](https://forum.ionicframework.com/t/navigation-inside-ion-side-menu/69553/3 "2017-03-07T11:44:39Z")

</div>

Unfortunately no. I could not find a viable solution that worked exactly like this. What I did for the moment is to have **_ng-hide_** handling the issue to me hiding or showing the content I need:

```
<ion-content>
  <ion-list ng-hide="itemSelected == 2">
    <ion-item class="font-left-menu item-icon-right" ng-click="selectItem(2)">
      {{'about' | translate}} <i class="icon ion-chevron-right icon-acessory accessory-size"></i>
    </ion-item>
    <br>
    <ion-item ng-click="selectItem(3)" menu-close>
      {{'exit' | translate}}
    </ion-item>
  </ion-list>

  <div ng-hide="itemSelected != 1" class="padding">
    <p>Here goes the Outbox page.</p>
  </div>

  <div ng-hide="itemSelected != 2">
    <ul class="list">
      <li class="item item-toggle">
        {{'useCellularData' | translate}}
        <label class="toggle menu-toggle-width">
          <input type="checkbox" ng-model="useCellularData.value" ng-checked="useCellularData.value" ng-change="setUseCellularData()">
          <div class="track">
            <div class="handle"></div>
          </div>
        </label>
      </li>
      <li class="item item-text-wrap" style="background-color: #fafafa;">
        <p>{{'restrictDataWiFi' | translate}}</p>
      </li>
    </ul>
  </div>

  <div ng-hide="itemSelected != 2" class="padding">
    <div class="col col-100 app-icon-info"></div>
    <div class="row" style="text-align: center;">
      Here goes about text.
    </div>
  </div>
</ion-content>

```

I know that is not the best solution, but as we did not have a lot of items and content to show in the side menu, it supplies our needs. I still want to go back to this, but I did not yet.