# Selecting Tabs

**URL:** <https://forums.fusetools.com/t/selecting-tabs/5586>\
**Category:** How-to Discussions\
**Created:** [February 8, 2018, 9:55am UTC](https://forums.fusetools.com/t/selecting-tabs/5586 "2018-02-08T09:55:52Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Denise](https://avatars.discourse-cdn.com/v4/letter/d/82dd89/32.png) [@Denise](https://forums.fusetools.com/u/Denise)\
**Post date:** [February 8, 2018, 9:55am UTC](https://forums.fusetools.com/t/selecting-tabs/5586/1 "2018-02-08T09:55:52Z")

</div>

Hi,  
in this example [https://www.fusetools.com/examples/tabs-layoutmaster](https://www.fusetools.com/examples/tabs-layoutmaster) i noticed that when i go from TAB 1 to TAB 3, TAB 2 is active for a second. I would like to go from TAB 1 to TAB 3 without activating TAB 2.

Here an example of how the tabs-layoutmaster example works:

- [Attached MP4 file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/VSfW3R3PYeCA-image-1518083693219.mp4)

Here an example of how i would like it to work:

- [Attached MP4 file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/jTX96n8l6YqV-image-1518083700150.mp4)

Do you have any suggestion?  
Thank you

---

<div class="post-metadata">

**Author:** ![Arturs](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/arturs/32/582_2.png) [@Arturs](https://forums.fusetools.com/u/Arturs)\
**Post date:** [February 8, 2018, 4:03pm UTC](https://forums.fusetools.com/t/selecting-tabs/5586/2 "2018-02-08T16:03:04Z")

</div>

Hey Denise,

This example uses `PageControl` for routing pages. The pages of a `PageControl` are ordered front to back, with the first child being in the front. Going forward means going towards the first child and going backwards means going towards the last child.

In your case, I would suggest using `Navigator`. [Here](https://www.fusetools.com/docs/fuse/controls/navigator#example) is a pretty nice example from the documentation how to use `Navigator` and navigate between pages.

Hope this helps.

---

<div class="post-metadata">

**Author:** ![Denise](https://avatars.discourse-cdn.com/v4/letter/d/82dd89/32.png) [@Denise](https://forums.fusetools.com/u/Denise)\
**Post date:** [February 12, 2018, 1:25pm UTC](https://forums.fusetools.com/t/selecting-tabs/5586/3 "2018-02-12T13:25:17Z")

</div>

Thank you so much @Arturs, but I already have a navigator in MainView.ux and the example you showed me doesn’t work. How can i make it work?

My MainView.Ux

```auto
<App>
    <Router ux:Name="router"/>
    <DockPanel>
        <Android.StatusBarConfig Color="#0003" IsVisible="True" />
        <StatusBarBackground Dock="Top"/>
        <Navigator DefaultPath="firstPage">
            <FirsTPage ux:Template="firstPage" router="router"/>
            <SecondPage ux:Template="secondPage" router="router"/>
            <ThirdPage ux:Template="thirdPage" router="router"/>
        </Navigator>
        <BottomBarBackground Dock="Bottom"/>
    </DockPanel>
</App>

```

Page Example

```auto
<Page ux:Class="FirstPage">
	<Router ux:Dependency="router" />
</Page>

```

---

<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 12, 2018, 1:52pm UTC](https://forums.fusetools.com/t/selecting-tabs/5586/4 "2018-02-12T13:52:21Z")

</div>

Hi Denise,

“doesn’t work” is not a good problem description. The docs example works just fine for me, and if it doesn’t for any reason work for you more details would be nice.

As for you question, what Arturs suggested is spot on. You need to use a `Navigator`. However, `Navigator` alone won’t do the trick, you’ll also need to have custom [Transitions](https://www.fusetools.com/docs/fuse/triggers/transition) on your pages.

Here’s something to get you started:

```auto
<App>
    <Android.StatusBarConfig Color="#0003" IsVisible="True" />
    <Router ux:Name="router"/>

    <JavaScript>
        module.exports = {
            gotoFirst: function() {
                router.goto("firstPage", {});
            },
            gotoSecond: function() {
                router.goto("secondPage", {});
            },
            gotoThird: function() {
                router.goto("thirdPage", {});
            }
        };
    </JavaScript>

    <DockPanel>
        <StatusBarBackground Dock="Top"/>
        <BottomBarBackground Dock="Bottom"/>
        <Grid Height="56" Dock="Top" Background="#14a" ColumnCount="3">
            <Panel HitTestMode="LocalBounds" Clicked="{gotoFirst}">
                <Text Value="One" Color="#fff" Alignment="Center" />
            </Panel>
            <Panel HitTestMode="LocalBounds" Clicked="{gotoSecond}">
                <Text Value="Two" Color="#fff" Alignment="Center" />
            </Panel>
            <Panel HitTestMode="LocalBounds" Clicked="{gotoThird}">
                <Text Value="Three" Color="#fff" Alignment="Center" />
            </Panel>
        </Grid>

        <Navigator DefaultPath="firstPage" Transition="None">
            <CustomTransitionPage ux:Template="firstPage" router="router" Background="#18f" />
            <CustomTransitionPage ux:Template="secondPage" router="router" Background="#f81" />
            <CustomTransitionPage ux:Template="thirdPage" router="router" Background="#8f1" />
        </Navigator>

    </DockPanel>

    <Panel ux:Class="CustomTransitionPage" Opacity="1">
        <Router ux:Dependency="router" />
        <Transition Direction="ToActive">
            <Change this.Opacity="0" Duration="0.16" />
        </Transition>
    </Panel>

</App>

```

---

<div class="post-metadata">

**Author:** ![Denise](https://avatars.discourse-cdn.com/v4/letter/d/82dd89/32.png) [@Denise](https://forums.fusetools.com/u/Denise)\
**Post date:** [February 12, 2018, 2:47pm UTC](https://forums.fusetools.com/t/selecting-tabs/5586/5 "2018-02-12T14:47:23Z")

</div>

Thank you, I used your example and [https://www.fusetools.com/docs/navigation/navigation#relative-navigation](https://www.fusetools.com/docs/navigation/navigation#relative-navigation). As I said I already had a Navigator in MainView.ux and I needed to make this tabs independent of the main navigation.

Solution:

MainView.ux

```auto
<App>
	<Router ux:Name="router"/>
	<DockPanel>

		<Navigator DefaultPath="tab">
			<HomePage ux:Template="home" router="router"/>
			<TabPage ux:Template="tab" router="router"/>
		</Navigator>

	</DockPanel>
</App>

```

HomePage.ux:

```auto
<Page ux:Class="HomePage">
	<Router ux:Dependency="router"/>
	<DockPanel>
		<Text Value="This is the homepage" />
	</DockPanel>
</Page>

```

TabPage.ux:

```auto
<Page ux:Class="TabPage">
	<Router ux:Dependency="router"/>

	<JavaScript>
	module.exports.toSub1 = function() {
		router.pushRelative(secondNav, "firstPage");
	}
	module.exports.toSub2 = function() {
		router.pushRelative(secondNav, "secondPage");
	}
	module.exports.toSub3 = function() {
		router.pushRelative(secondNav, "thirdPage");
	}

	module.exports.gotoHome = function() {
		router.push("homePage");
	}
	</JavaScript>

	<DockPanel>
		<StatusBarBackground Dock="Top"/>
		<BottomBarBackground Dock="Bottom"/>

		<Grid Height="56" Dock="Top" Background="#14a" ColumnCount="3">
			<Panel HitTestMode="LocalBounds" Clicked="{toSub1}">
				<Text Value="One" Color="#fff" Alignment="Center" />
			</Panel>
			<Panel HitTestMode="LocalBounds" Clicked="{toSub2}">
				<Text Value="Two" Color="#fff" Alignment="Center" />
			</Panel>
			<Panel HitTestMode="LocalBounds" Clicked="{toSub3}">
				<Text Value="Three" Color="#fff" Alignment="Center" />
			</Panel>
		</Grid>

		<Navigator ux:Name="secondNav" DefaultPath="firstPage" Transition="None">
			<CustomTransitionPage ux:Template="firstPage" router="router" Background="#18f" />
			<CustomTransitionPage ux:Template="secondPage" router="router" Background="#f81" />
			<CustomTransitionPage ux:Template="thirdPage" router="router" Background="#8f1" />
		</Navigator>

	</DockPanel>

	<Panel ux:Class="CustomTransitionPage" Opacity="1">
		<Router ux:Dependency="router" />
		<Transition Direction="ToActive">
			<Change this.Opacity="0" Duration="0.16" />
		</Transition>

		<Rectangle Color="White" Height="100" Width="100" Clicked="{gotoHome}" />
	</Panel>

</Page>

```