# Single Component With Back button for all Pages

**URL:** <https://forums.fusetools.com/t/single-component-with-back-button-for-all-pages/3814>\
**Category:** How-to Discussions\
**Created:** [July 22, 2016, 2:38pm UTC](https://forums.fusetools.com/t/single-component-with-back-button-for-all-pages/3814 "2016-07-22T14:38:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Casey\_Williams](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/casey_williams/32/147_2.png) [@Casey\_Williams](https://forums.fusetools.com/u/Casey_Williams)\
**Post date:** [July 22, 2016, 2:38pm UTC](https://forums.fusetools.com/t/single-component-with-back-button-for-all-pages/3814/1 "2016-07-22T14:38:58Z")

</div>

I have a custom Toobar component in my app.

```auto
<!-- TOOLBAR START-->

<StackPanel Dock="Top" ux:Class="Toolbar">

    <Router ux:Dependency="router"/>

    <JavaScript File="../Backend.js" />

    <string ux:Property="Title" />
    <float4 ux:Property="Color" />

    <Panel Height="56" Color="{Property this.Color}" Padding="16, 0">
        <Button Clicked="{goBack}">
          <Icon FontSize="20" Margin="0,16">&#xE876;</Icon>
        </Button>
        <Text Value="{Property this.Title}" Alignment="CenterLeft" Font="medium" FontSize="15" Margin="56,0" TextColor="#fff" />
        <StackPanel Orientation="Horizontal" Alignment="Right" >
            <Icon FontSize="20" Margin="0,16">&#xE5D4;</Icon>
        </StackPanel>
    </Panel>

    <!-- Flat or Raised?-->
    <DropShadow />

</StackPanel>
<!-- TOOLBAR END -->

```

The button calls a function in my main JS file that tells the router to go back. I reference the app’s router to the Toolbar component as a ux:Dependency. The toolbar is included in pretty much every page in the app.

My problem is basically that it doesn’t go back when pressed, what am I doing wrong?

---

<div class="post-metadata">

**Author:** ![Ish\_Singh](https://avatars.discourse-cdn.com/v4/letter/i/4bbf92/32.png) [@Ish\_Singh](https://forums.fusetools.com/u/Ish_Singh)\
**Post date:** [July 23, 2016, 5:42pm UTC](https://forums.fusetools.com/t/single-component-with-back-button-for-all-pages/3814/2 "2016-07-23T17:42:22Z")

</div>

Here is what I use and its working.

```auto
    <WhileTrue Value="{Property this.ShowBackButton}">
    <Panel Width="50" Height="50">
    <MDI Alignment="VerticalCenter" TextAlignment="Left" FontSize="30" Name="back" TextColor="#fff" Margin="10,0,0,0">&#xf2ea;</MDI>
    <Clicked Handler="{routerPop}" />
    </Panel>
    </WhileTrue>

```

javascript:

```auto
module.exports = {
  routerPop : function() { router.goBack();}
}

```

---

<div class="post-metadata">

**Author:** ![Casey\_Williams](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/casey_williams/32/147_2.png) [@Casey\_Williams](https://forums.fusetools.com/u/Casey_Williams)\
**Post date:** [July 25, 2016, 9:32am UTC](https://forums.fusetools.com/t/single-component-with-back-button-for-all-pages/3814/3 "2016-07-25T09:32:34Z")

</div>

Sorry Ish, I can’t quite understand what you are doing. Could you show me some more of your code so I can get a better idea of where and how you are using it?

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [July 25, 2016, 9:43am UTC](https://forums.fusetools.com/t/single-component-with-back-button-for-all-pages/3814/4 "2016-07-25T09:43:00Z")

</div>

Hi!

Could you share some more of your code Casey? Hard to see why it’s not working the way you want.

---

<div class="post-metadata">

**Author:** ![Casey\_Williams](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/casey_williams/32/147_2.png) [@Casey\_Williams](https://forums.fusetools.com/u/Casey_Williams)\
**Post date:** [July 25, 2016, 10:39am UTC](https://forums.fusetools.com/t/single-component-with-back-button-for-all-pages/3814/5 "2016-07-25T10:39:10Z")

</div>

Hi Kristian,

I’ve actually just managed to fix it now, I was using `router.goto()` for navigation which resets the navigation path each use. Switched to `router.push()` and works perfect now! 🙂