Add new "item" to "ion-list" within the ion-"sidemenu"

Hello guys!
First I apologize for not speaking English correctly.
I have the following question: I created a default project “ionic start MyApp SideMenu” this way:

<ion-side-enable-menus menu-back-with-views="false">
        <ion-nav-bar class="bar-balanced">

            <ion-nav-buttons side="left">
                <button class="button button-button icon-clear ion-navicon" menu-toggle="left">
        <ion-nav-view name="menuContent"></ion-nav-view>

                <the class="item-icon-left" href="#/app/playlists" menu-close nav-clear>
                    <i class="icon ion-ios-home-outline"></i>

                <the class="item-icon-left" ng-click="login()" menu-close>
                    <i class="icon ion-social-rss-outline"></i>
                    Get Network BeZz

                <the class="item-icon-left" href="#/app/search" menu-close nav-clear>
                    <i class="icon ion-ios-gear-outline"></i>

                <the class="item-icon-left" href="#/app/browse" menu-close nav-clear>
                    <i class="icon ion-ios-information-outline"></i>

However, I tried to add the list of “Menu” but it didn’t work, even though I’m creating a new file that would be the qrcode.html
In this way:

<the class="item-icon-left" href="#/app/qrcode" menu-close nav-clear>
    <i class="icon ion-ios-barcode-outline"></i>
    QrCode Reader

What did I do wrong? Or what is the way to do this correctly?
Thank you in advance.
Thank you!

I formatted your post into code blocks. You have some anchor tags beginning with the instead of a. I’m not sure if that is a paste error.

What exactly isn’t working? The menu item isn’t showing up at all, or the link to that view isn’t working?

Well, I can insert options in the “Menu” without any problem. But I can’t go to the page of the selected option.
Say, that if I click on “Get Network BeZz,” he will take me to the page “ng-click =” login () ". And so on.
So I wanted to add an option to “Menu” and click, he take me to page. I tried to add a new html page but it doesn’t work.

Yes. Can you post the structure of your states? Should look something like this:

    .state('app', {
        url: '/app',
        templateUrl: 'templates/app.html',
        abstract: true

Just an advice: Your HTML is really messy. Try to organize it before posting. :smile:

Maybe the error is the fact your anchor begins with “the” and closes with “a”. And make sure you add “href” attribute.

Hi guys. Thanks, that actually the "appeared due to translation. But it’s the same that is in my code.


Then, I saw someone talking about exactly that. I even tried but without success.
In fact, the file you are talking about is the www\js\app.js? Correct?
And referring to the code, is here:
I haven’t changed anything from him.


  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'

  .state('', {
    url: "/search",
    views: {
      'menuContent': {
        templateUrl: "templates/search.html"

  .state('app.browse', {
    url: "/browse",
    views: {
      'menuContent': {
        templateUrl: "templates/browse.html"
    .state('app.playlists', {
      url: "/playlists",
      views: {
        'menuContent': {
          templateUrl: "templates/playlists.html",
          controller: 'PlaylistsCtrl'

  .state('app.single', {
    url: "/playlists/:playlistId",
    views: {
      'menuContent': {
        templateUrl: "templates/playlist.html",
        controller: 'PlaylistCtrl'
  // if none of the above states are matched, use this as the fallback


Yes, you need to add the qrcode as a state:

.state('app.qrcode', {
    url: "/qrcode",
    views: {
      'menuContent': {
        templateUrl: "templates/qrcode.html",
        controller: 'QrcodeCtrl'

There is a good explanation of routing at @nraboy’s blog: