# Tab bar navigation example problem

**URL:** <https://forums.fusetools.com/t/tab-bar-navigation-example-problem/3929>\
**Category:** General\
**Created:** [June 26, 2017, 6:21pm UTC](https://forums.fusetools.com/t/tab-bar-navigation-example-problem/3929 "2017-06-26T18:21:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kodemikkel](https://avatars.discourse-cdn.com/v4/letter/k/ba8739/32.png) [@Kodemikkel](https://forums.fusetools.com/u/Kodemikkel)\
**Post date:** [June 26, 2017, 6:21pm UTC](https://forums.fusetools.com/t/tab-bar-navigation-example-problem/3929/1 "2017-06-26T18:21:34Z")

</div>

Hello,

I’ve encountered problem after problem while developing my app today (most of them I fixed), and I started looking at some navigation examples to improve the navigation in my app. I stumbled upon tab bar navigation ([https://www.fusetools.com/examples/tab-bar-navigation](https://www.fusetools.com/examples/tab-bar-navigation)), which looked like something I could need.

I then proceeded to copy the code provided to my project and started messing around with it. However, after struggling for about an hour or so, I still can’t, for the love of me, figure out how I’m supposed to use multiple, different pages with the code provided?

```auto
<JavaScript>
  var pages = [
      {"name":"page1", "highlight":"#34495e", "icon":"Assets/icon-hexagon.png"},
      {"name":"page2", "highlight":"#3498db", "icon":"Assets/icon-star.png"},
      {"name":"page3", "highlight":"#aa3377", "icon":"Assets/icon-square.png"},
      {"name":"page4", "highlight":"#88cc22", "icon":"Assets/icon-triangle.png"}
  ];
  module.exports = {
      pages: pages,
      pageCount: pages.length
  };
</JavaScript>

<Page ux:Class="MyPage">
   <ResourceFloat4 Key="Highlight" Value="{highlight}" />
   <FileImageSource ux:Key="Icon" File="{icon}" />
   <Image File="Assets/FuseLogo.png" StretchDirection="DownOnly" />
</Page>

...

<PageControl ux:Name="pages">
   <Each Items="{pages}">
       <MyPage />
   </Each>
</PageControl>

```

As the pages are iterated using a loop, I’ve no clue as to how to use different pages, any help would be appreciated, as I’m starting to get frustrated.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [June 26, 2017, 6:30pm UTC](https://forums.fusetools.com/t/tab-bar-navigation-example-problem/3929/2 "2017-06-26T18:30:15Z")

</div>

Hi Kodemikkel,

a _frustrated_ Kodemikkel is definitely not something that we want to see, so let’s get cracking!

The only thing that appears to be a question is the `how to use different pages` part, but honestly I don’t really understand what the question is. The basic structure of the example is there, the pages are defined in JavaScript and you seem to be good to go… so where’s the problem exactly?

---

<div class="post-metadata">

**Author:** ![Kodemikkel](https://avatars.discourse-cdn.com/v4/letter/k/ba8739/32.png) [@Kodemikkel](https://forums.fusetools.com/u/Kodemikkel)\
**Post date:** [June 26, 2017, 6:53pm UTC](https://forums.fusetools.com/t/tab-bar-navigation-example-problem/3929/3 "2017-06-26T18:53:36Z")

</div>

It might be that I’m misunderstanding or missing something basic here, but in the example every page is equal. All pages have the same content, apart from the color and icon. How would I go about creating pages with different content? Let’s say I want a page with a button and a different page with some text.

I see that all pages are created using `MyPage` class, but would it be possible to define the pages using one class for each page, or is the difference in content limited to what you define in the JavaScript array?

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [June 26, 2017, 7:03pm UTC](https://forums.fusetools.com/t/tab-bar-navigation-example-problem/3929/4 "2017-06-26T19:03:00Z")

</div>

Oh yes, you totally can do that.

I personally would first add another property (which identifies the template to be used) to the page objects in JS, like so:

```auto
var pages = [
  {name:"page1", type:"styleOne", highlight:"#34495e", icon:"Assets/icon-hexagon.png"},
  {name:"page2", type:"styleTwo", highlight:"#3498db", icon:"Assets/icon-star.png"},
  {name:"page3", type:"styleOne", highlight:"#aa3377", icon:"Assets/icon-square.png"},
  {name:"page4", type:"styleTwo", highlight:"#88cc22", icon:"Assets/icon-triangle.png"}
];

```

… note the new `type` property with two possible values.

And then I would improve the `Each` to work with multiple templates and match on the new `type` property we just created:

```auto
<Each Items="{pages}" MatchKey="type">
   <MyPage ux:Template="styleOne" />
   <SomeOtherPage ux:Template="styleTwo" />
</Each>

```

and finally, I would of course create a `ux:Class` for the new `SomeOtherPage` thing I just invented.

Hope this helps!

---

<div class="post-metadata">

**Author:** ![Kodemikkel](https://avatars.discourse-cdn.com/v4/letter/k/ba8739/32.png) [@Kodemikkel](https://forums.fusetools.com/u/Kodemikkel)\
**Post date:** [June 26, 2017, 7:13pm UTC](https://forums.fusetools.com/t/tab-bar-navigation-example-problem/3929/5 "2017-06-26T19:13:22Z")

</div>

Aaah, got it to work using what you said.

Thanks! 🙂