# In Side Menu no items are shown

**URL:** <https://forum.ionicframework.com/t/in-side-menu-no-items-are-shown/101930>\
**Category:** ionic-v3\
**Created:** [August 14, 2017, 3:43pm UTC](https://forum.ionicframework.com/t/in-side-menu-no-items-are-shown/101930 "2017-08-14T15:43:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mdline](https://avatars.discourse-cdn.com/v4/letter/m/82dd89/32.png) [@mdline](https://forum.ionicframework.com/u/mdline)\
**Post date:** [August 14, 2017, 3:43pm UTC](https://forum.ionicframework.com/t/in-side-menu-no-items-are-shown/101930/1 "2017-08-14T15:43:56Z")

</div>

Hello,

I have the problem, that in my app the items for the side menu aren’t displayed. When I click the menu icon, the side menu appears with the title ‘Menü’, but no items are shown.

**app.ts**

```auto
import {Component, ViewChild} from '@angular/core';
import {App, Platform, Nav} from 'ionic-angular';
import {StatusBar, Splashscreen} from 'ionic-native';
import {HelloPage} from '../pages/HelloPage';

@Component({
  templateUrl: 'app.html'
})

export class MyApp{
  @ViewChild(Nav) nav: Nav;
  rootPage = HelloPage;

  constructor(private platform: Platform) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}

```

**app.html**

```auto
<ion-menu [content]="content">
  <ion-toolbar>
    <ion-title>Menü</ion-title>
  </ion-toolbar>
  <ion-content>
    <ion-list>
      <button ion-item>
        Einstellungen
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

```

When I use

```auto
<ion-navbar *navbar>

```

then even no navbar is shown.  
So i have to use it so:

```auto
<ion-navbar>

```

**hello.html**

```auto
<ion-header>
<ion-navbar>
    <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
    <ion-title>Hello</ion-title>
</ion-navbar>

<ion-content padding">
    <h2>Hello World!</h2>
</ion-content>
</ion-header>

```

Please help!

---

<div class="post-metadata">

**Author:** ![mdline](https://avatars.discourse-cdn.com/v4/letter/m/82dd89/32.png) [@mdline](https://forum.ionicframework.com/u/mdline)\
**Post date:** [August 14, 2017, 4:20pm UTC](https://forum.ionicframework.com/t/in-side-menu-no-items-are-shown/101930/2 "2017-08-14T16:20:53Z")

</div>

I find the solution: I forgot to add

```auto
<ion-header>

```

see **App.html**

```auto
<ion-menu [content]="content">

    <ion-header>
      <ion-toolbar>
        <ion-title>Menü</ion-title>
      </ion-toolbar>
    </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item>
        Einstellungen
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

```

But why this

```auto
<ion-navbar *navbar>

```

doesn’t work?

---

<div class="post-metadata">

**Author:** ![lucasbasquerotto](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/lucasbasquerotto/32/101719_2.png) [@lucasbasquerotto](https://forum.ionicframework.com/u/lucasbasquerotto)\
**Post date:** [August 14, 2017, 6:44pm UTC](https://forum.ionicframework.com/t/in-side-menu-no-items-are-shown/101930/3 "2017-08-14T18:44:34Z")

</div>

@mdline I think asterisk (`*`) in that case is used only for the angular **structural directives** , like `ngIf`, `ngFor`, etc… If you want a local template variable to reference it somewhere you can use a `hash`:

`<ion-navbar #navbar>`

But if you won’t use this reference anywhere, you can just use `<ion-navbar>`.

---

<div class="post-metadata">

**Author:** ![mdline](https://avatars.discourse-cdn.com/v4/letter/m/82dd89/32.png) [@mdline](https://forum.ionicframework.com/u/mdline)\
**Post date:** [August 15, 2017, 1:46pm UTC](https://forum.ionicframework.com/t/in-side-menu-no-items-are-shown/101930/4 "2017-08-15T13:46:10Z")

</div>

ok, but I want to reuse the template with menu in other pages, but it doesn’t work.  
What I make wrong?

```auto
  <ion-navbar #nav>
    <ion-title>New Page</ion-title>
  </ion-navbar>

<ion-content>
</ion-content>

```

---

<div class="post-metadata">

**Author:** ![lucasbasquerotto](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/lucasbasquerotto/32/101719_2.png) [@lucasbasquerotto](https://forum.ionicframework.com/u/lucasbasquerotto)\
**Post date:** [August 15, 2017, 2:20pm UTC](https://forum.ionicframework.com/t/in-side-menu-no-items-are-shown/101930/5 "2017-08-15T14:20:08Z")

</div>

@mdline I think in your page the `ion-content` should be outside `ion-header`:

```auto
<ion-header>
	<ion-navbar>
		<button menuToggle>
			<ion-icon name="menu"></ion-icon>
		</button>
		<ion-title>Hello</ion-title>
	</ion-navbar>
</ion-header>

<ion-content padding>
	<h2>Hello World!</h2>
</ion-content>

```

To have a better understanding you can create the ionic sidemenu app and see the code:

`$ ionic start myApp sidemenu`

> **[Getting Started with Ionic](https://ionicframework.com/getting-started/)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards