# Is nested navigation even possible?

**URL:** <https://forums.fusetools.com/t/is-nested-navigation-even-possible/5495>\
**Category:** How-to Discussions\
**Created:** [February 16, 2016, 4:15am UTC](https://forums.fusetools.com/t/is-nested-navigation-even-possible/5495 "2016-02-16T04:15:19Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Brian\_W](https://avatars.discourse-cdn.com/v4/letter/b/8e7dd6/32.png) [@Brian\_W](https://forums.fusetools.com/u/Brian_W)\
**Post date:** [February 16, 2016, 4:15am UTC](https://forums.fusetools.com/t/is-nested-navigation-even-possible/5495/1 "2016-02-16T04:15:19Z")

</div>

Hi,

I’m new to Fuse and am generally loving it so far. But for the life of me I can’t seem to make my nested navigation work.

First and foremost, is it even possible to have 2 navigation tags in your app?

My app has the following navigation hierarchy:

- login screen
  - Home
  - Other

Currently I have an outer nav that deals with changing from LoginScreen -\> Home. And I have an inner nav that deals with going from Home \<–\> Other.

Do I need to set this up in 1 hierarchical navigation tag?

Weirdly, when I try running my app with the nav-within-a-nav, the buttons on a nested page stop handling click events whenever I _export_ the Observable that holds the nested page’s name (for the nav’s dynamic page assignment). BTW, just for extra tinfoil-hattiness, I made sure that my inner and outer navs all had unique ux:Name attributes to avoid any possible namespace collisions (I wish I knew whether ux:Name attribute uniqueness mattered, so hopefully someone can tell me!). I can instantiate an Observable and use it in functions, as long as it’s not _exported_.

I’m pretty overwhelmed, first by this weird module.exports-silently-failing bug. And second by how navigation is supposed to work in Fuse.

Here’s a bunch of stuff I’ve tried for the inner page (which is its own .ux file). Thanks for your advice!

```auto
<Panel ux:Class="LoginSuccessPage">

  <JavaScript>
   // JS approach doesnt work because exporting thePage blows it up silently...
    var Observable = require('FuseJS/Observable');
    var thePage = Observable('Home');
    module.exports = {
      // thePage: thePage,
      goToHome: function() {
        // thePage.value = 'Home';
        console.log('going home'); //thePage.value);
      },
      goToOther: function() {
        // thePage.value = 'Other';
        // WTF: as soon as thePage is exported, the click handlers stop working?
        console.log('going other') //thePage.value);
      },
    };
  </JavaScript>

  <DirectNavigation Active="{thePage}" ux:Name="innerNav" />
  <!-- <PageControl Active="Home" ux:Name="innerNav"> PageControl+NavigateTo's also didn't work -->
  <Page ux:Name="Home">
    <Text Value="Woohoo we are home!" />
  </Page>

  <Page ux:Name="Other">
    <Text Value="Other stuff!" />
  </Page>

  <Button Text="Home" Alignment="BottomLeft">
    <!-- Callback doesnt work due to weird JS module.exports silent bug -->
    <Clicked><Callback Handler="{goToHome}" /></Clicked>
    <!-- This also didn't work -->
    <!-- <Clicked><NavigateTo Target="Home" /></Clicked> -->
    <!-- <Clicked><Set innerNav.Active="Home" /></Clicked> -->

    <!-- <Clicked><NavigateTo Target="Home" NavigationContext="innerNav"/></Clicked> -->
  </Button>
  <Button Text="Other" Alignment="BottomRight">
    <Clicked><Callback Handler="{goToOther}" /></Clicked>
    <!-- This also didn't work -->
    <!-- <Clicked><NavigateTo Target="Other" /></Clicked> -->
    <!-- <Clicked><Set innerNav.Active="Other" /></Clicked> -->
    <!-- <Clicked><NavigateTo Target="Other" NavigationContext="innerNav"/></Clicked> -->
  </Button>

  <!-- </PageControl> -->
</Panel>

```

---

<div class="post-metadata">

**Author:** ![Brian\_W](https://avatars.discourse-cdn.com/v4/letter/b/8e7dd6/32.png) [@Brian\_W](https://forums.fusetools.com/u/Brian_W)\
**Post date:** [February 16, 2016, 6:18am UTC](https://forums.fusetools.com/t/is-nested-navigation-even-possible/5495/2 "2016-02-16T06:18:48Z")

</div>

Well I’ve answered my own question: Yes, it is possible to have nested Navigation tags in your app.

I don’t know why I couldn’t get it to work earlier. Probably a small syntax error or something. I should’ve persevered a bit more.