# DirectNavigation - Sidebar

**URL:** <https://forums.fusetools.com/t/directnavigation-sidebar/6269>\
**Category:** How-to Discussions\
**Created:** [November 2, 2015, 8:11pm UTC](https://forums.fusetools.com/t/directnavigation-sidebar/6269 "2015-11-02T20:11:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jake\_Hare](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_hare/32/107_2.png) [@Jake\_Hare](https://forums.fusetools.com/u/Jake_Hare)\
**Post date:** [November 2, 2015, 8:11pm UTC](https://forums.fusetools.com/t/directnavigation-sidebar/6269/1 "2015-11-02T20:11:20Z")

</div>

Hey, I’m trying to set it up where when a user clicks the picture or the different pages on the sidebar it will navigate to those pages. I currently have a Mainview.Ux and a Sidebar.ux (Mainview is utilizing the Edgenavigator to bring out the sidebar) just like in the socialmedia example.

Here’s a look at my sidebar when it’s opened:

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/LpvP1mOfTqdJ-legacy-files-3vEvX2SWsIq5H4Oo-2rUfLEvv-YGd_OPYG3Vwj4gI.png)

and here’s a look at my code:

Mainview.ux

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/Z5bs2IDhAOcG-legacy-files-CPSaIz2RrYXdwdhO-PHLIv8t_FwfoiUTVYqoH2MAx.png)

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/5MIeIJ6LPxoM-legacy-files-hVEFH7DE1gqDfh9n-z-TNB7mtUNTipwob024FcAuk.png)

Sidebar.ux

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/Ma6Ngvc1v827-legacy-files-MaU0yaO5F7lD88qZ-diCcQlIA8uYQx0nrAWS6n7IY.png)

Have any suggestions?

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [November 2, 2015, 9:42pm UTC](https://forums.fusetools.com/t/directnavigation-sidebar/6269/2 "2015-11-02T21:42:27Z")

</div>

Our [Tab bar navigation](https://www.fusetools.com/community/examples/tabbarnavigation) example shows how to do this in a single UX file. While this won’t cover your use case directly, it outlines how to navigate to specific pages in general.

The idea is to give each `Page` a `ux:Name` (perhaps `Name` is the same these days, but I don’t think so off the top of my head):

```auto
<Page ux:Name="page1">

```

Then you can use the `Active` property on the `PageControl` (or `Navigation`, whichever you’re using) to the name of the `Page`, and it will navigate there. For example, here’s a `Clicked` trigger that uses a `Set` animator to navigate to a page with `ux:Name="page1"` inside a `PageControl` called `pages`:

```auto
        <Clicked>
          <Set pages.Active="page1" />
        </Clicked>

```

This works from purely UX, but currently as we’re still working on features that allow you to set properties exposed in _other_ UX files, you’ll need to use JS to accomplish this.

If you bind your `PageControl`'s `Active` property to an `Observable` that contains a string corresponding to the current `Page`'s `ux:Name`, then you can simply change the `Observable`'s `value` property to navigate to a specific page. An example:

JS:

```auto
var currentPage = Observable("page1");

function someHandler() {
    currentPage.value = "page2";
}

```

UX:

```auto
<PageControl Active="{currentPage}">
    <Page ux:Name="page1"> ... </Page>
    <Page ux:Name="page2"> ... </Page>

```

The last piece of this puzzle then involves making sure the bindings in your Sidebar.ux and Mainview.ux actually correspond to the same `currentPage` (or whatever you choose to name it) `Observable`. I’m guessing your Mainview.ux instantiates a Sidebar somewhere? In this case, as long as your `JavaScript` tag exists on a parent node that’s common to all of the nodes that bind to it, the bindings should cascade and bind to the same `Observable` (at least in Fuse 0.8.5 and above, which is currently available [here](https://www.fusetools.com/downloads/channel/qa) and will be out officially in the next few days). I would try that first, and let me know if you run into any issues. We’re still hammering out the details for working with larger projects with many UX files and many JS contexts/bindings, so there may be kinks 🙂

---

<div class="post-metadata">

**Author:** ![Jake\_Hare](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_hare/32/107_2.png) [@Jake\_Hare](https://forums.fusetools.com/u/Jake_Hare)\
**Post date:** [November 2, 2015, 10:41pm UTC](https://forums.fusetools.com/t/directnavigation-sidebar/6269/3 "2015-11-02T22:41:31Z")

</div>

Jake, you’re the man! Thanks for the walkthrough. That makes so much sense…

The only question I have would be the JS image you provided: I’m still a bit fuzzy on the concept of the Observable() function. Is that making the currentPage (in your exmample) able to be called in another .ux file and be useable within that scope?

I’ve read the documentation and the guide but I’m still trying to really grasp that.

I understand exactly what I want do do, it’s just knowing the right code and syntax that I’m having trouble with.

Again, thank you so much and the videos are awesome!

---

<div class="post-metadata">

**Author:** ![Jake\_Hare](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_hare/32/107_2.png) [@Jake\_Hare](https://forums.fusetools.com/u/Jake_Hare)\
**Post date:** [November 2, 2015, 10:44pm UTC](https://forums.fusetools.com/t/directnavigation-sidebar/6269/4 "2015-11-02T22:44:23Z")

</div>

Also, for the JS { Would I need to add a currentPage.value for each page that I make i.e. Calendar, Stats, Camera Bag, etc.}

---

<div class="post-metadata">

**Author:** ![Jake\_Hare](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_hare/32/107_2.png) [@Jake\_Hare](https://forums.fusetools.com/u/Jake_Hare)\
**Post date:** [November 2, 2015, 10:54pm UTC](https://forums.fusetools.com/t/directnavigation-sidebar/6269/5 "2015-11-02T22:54:57Z")

</div>

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/sEC6AMqHSWox-legacy-files-K07DFjAhnojXKXo1-WCQY6hqUozK7McDzzjgoJFnT.png)

---

<div class="post-metadata">

**Author:** ![Jake\_Hare](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_hare/32/107_2.png) [@Jake\_Hare](https://forums.fusetools.com/u/Jake_Hare)\
**Post date:** [November 2, 2015, 11:01pm UTC](https://forums.fusetools.com/t/directnavigation-sidebar/6269/6 "2015-11-02T23:01:37Z")

</div>

What do I need to put in the block under Clicked to make it navigate to the page I want?

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/egFTuoq3J4ex-legacy-files-SpxCwWz9jWyU2u2J-qu1C0ugo_i4X5Qw8XqcImHRW.png)