# How to open the EdgeNavigator on pressing the back button

**URL:** <https://forums.fusetools.com/t/how-to-open-the-edgenavigator-on-pressing-the-back-button/768>\
**Category:** How-to Discussions\
**Created:** [February 8, 2018, 6:11pm UTC](https://forums.fusetools.com/t/how-to-open-the-edgenavigator-on-pressing-the-back-button/768 "2018-02-08T18:11:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Matti\_Tihverainen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/matti_tihverainen/32/684_2.png) [@Matti\_Tihverainen](https://forums.fusetools.com/u/Matti_Tihverainen)\
**Post date:** [February 8, 2018, 6:11pm UTC](https://forums.fusetools.com/t/how-to-open-the-edgenavigator-on-pressing-the-back-button/768/1 "2018-02-08T18:11:56Z")

</div>

Hello! How can I open the EdgeNavigator on pressing the back button while in the main view? In the following example I can navigate back from the green and red page plus close the EdgeNavigator by pressing the back button, but how can I toggle the EdgeNavigator in the yellow view?

```auto
<App>
  <JavaScript>
    module.exports = {
      gotoGreenPage: function() {router.push("greenPage");},
      gotoRedPage: function() {router.push("redPage");},
      dismissSidebar: function() {navigator.dismiss();}
    };
  </JavaScript>
  <Router ux:Name="router" />
  <Navigator DefaultPath="yellowPage">
    <Page ux:Name="yellowPage" Background="Yellow">
      <EdgeNavigator ux:Name="navigator" HitTestMode="LocalBoundsAndChildren">
    	<DockPanel ux:Name="sidebar" Width="100%" Edge="Left">
          <Router ux:Name="subrouter" />
          <PageControl>
            <Page Background="Blue">
              <OnBackButton>
                <Callback Handler="{dismissSidebar}" />
              </OnBackButton>
            </Page>
          </PageControl>
        </DockPanel>
        <DockPanel>
          <Button Text="Goto green page" Background="Black" Width="200" Height="100" Alignment="Center" Y="-25%" Clicked="{gotoGreenPage}" />
          <Button Text="Open menu" Background="Black" Width="200" Height="100" Alignment="Center">
            <Clicked>
              <NavigateToggle Target="sidebar" />
            </Clicked>
          </Button>
          <Button Text="Goto red page" Background="Black" Width="200" Height="100" Alignment="Center" Y="25%" Clicked="{gotoRedPage}" />
        </DockPanel>
      </EdgeNavigator>
    </Page>
    <Page ux:Name="greenPage" Background="Green" />
    <Page ux:Name="redPage" Background="Red" />
  </Navigator>
</App>

```

---

<div class="post-metadata">

**Author:** ![Matti\_Tihverainen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/matti_tihverainen/32/684_2.png) [@Matti\_Tihverainen](https://forums.fusetools.com/u/Matti_Tihverainen)\
**Post date:** [February 8, 2018, 9:02pm UTC](https://forums.fusetools.com/t/how-to-open-the-edgenavigator-on-pressing-the-back-button/768/2 "2018-02-08T21:02:19Z")

</div>

Hello! I managed to push this a bit further, but got stuck again. The logic works, but how can I trigger the EdgeNavigator to open from JS in the “console.log” line? For EdgeNavigator there’s “open”, but I can’t seem to get it working in this context.

```auto
<App>
  <JavaScript>

    var canOpenNavigator = true;

    module.exports = {
      gotoGreenPage: function() {router.push("greenPage");},
      gotoRedPage: function() {router.push("redPage");},
      dismissSidebar: function() {canOpenNavigator = true; navigator.dismiss();},
      detectBackButton: function() {
        if (canOpenNavigator) {
          console.log("Open edge navigation");
        }
      },
      enableNavigation: function () {canOpenNavigator = true;},
      disableNavigation: function () {canOpenNavigator = false;}
    };

  </JavaScript>
  <Router ux:Name="router" />
  <Navigator DefaultPath="yellowPage">
    <OnBackButton>
      <Callback Handler="{detectBackButton}" />
    </OnBackButton>
    <Page ux:Name="yellowPage" Background="Yellow">
      <Activated Handler="{enableNavigation}" />
      <EdgeNavigator ux:Name="navigator" HitTestMode="LocalBoundsAndChildren">
        <DockPanel ux:Name="sidebar" Width="100%" Edge="Left">
          <Activated Handler="{disableNavigation}" />
          <Router ux:Name="subrouter" />
          <PageControl>
            <Page Background="Blue">
              <Activated Handler="{disableNavigation}" />
              <OnBackButton>
                <Callback Handler="{dismissSidebar}" />
              </OnBackButton>
            </Page>
          </PageControl>
        </DockPanel>
        <DockPanel>
          <Button Text="Goto green page" Background="Black" Width="200" Height="100" Alignment="Center" Y="-25%" Clicked="{gotoGreenPage}" />
          <Button Text="Open menu" Background="Black" Width="200" Height="100" Alignment="Center">
            <Clicked>
              <NavigateToggle Target="sidebar" />
              <Callback Handler="{disableNavigation}" />
            </Clicked>
          </Button>
          <Button Text="Goto red page" Background="Black" Width="200" Height="100" Alignment="Center" Y="25%" Clicked="{gotoRedPage}" />
        </DockPanel>
      </EdgeNavigator>
    </Page>
    <Page ux:Name="greenPage" Background="Green">
      <Activated Handler="{disableNavigation}" />
    </Page>
    <Page ux:Name="redPage" Background="Red">
      <Activated Handler="{disableNavigation}" />
    </Page>
  </Navigator>
</App>

```

---

<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:** [February 9, 2018, 11:14am UTC](https://forums.fusetools.com/t/how-to-open-the-edgenavigator-on-pressing-the-back-button/768/3 "2018-02-09T11:14:55Z")

</div>

In my tests, it was as simple as adding a single line to your code:

```auto
        if (canOpenNavigator) {
          console.log("Open edge navigation");
          navigator.open("Left");
        }

```

Or maybe I’m misunderstanding your use case.

---

<div class="post-metadata">

**Author:** ![Matti\_Tihverainen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/matti_tihverainen/32/684_2.png) [@Matti\_Tihverainen](https://forums.fusetools.com/u/Matti_Tihverainen)\
**Post date:** [February 9, 2018, 11:18am UTC](https://forums.fusetools.com/t/how-to-open-the-edgenavigator-on-pressing-the-back-button/768/4 "2018-02-09T11:18:44Z")

</div>

Thank you Uldis!