# Disable EdgeNavigator Edge

**URL:** <https://forums.fusetools.com/t/disable-edgenavigator-edge/6053>\
**Category:** How-to Discussions\
**Created:** [September 10, 2017, 5:39pm UTC](https://forums.fusetools.com/t/disable-edgenavigator-edge/6053 "2017-09-10T17:39:56Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![SvenWS](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/svenws/32/325_2.png) [@SvenWS](https://forums.fusetools.com/u/SvenWS)\
**Post date:** [September 10, 2017, 5:39pm UTC](https://forums.fusetools.com/t/disable-edgenavigator-edge/6053/1 "2017-09-10T17:39:56Z")

</div>

I’m using an EdgeNavigator to show a menu. All the pages are nested within the control. In some situations (showing a webview) I like to disable the edge slide detection because the side menu will not the topmost layer (which is the case f.e. when displaying a webview). I can’t find something the docs. Is this possible?

---

<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:** [September 11, 2017, 8:04am UTC](https://forums.fusetools.com/t/disable-edgenavigator-edge/6053/2 "2017-09-11T08:04:05Z")

</div>

Something like you’re describing can usually be achieved by calling a `Change`, targeting [IsEnabled](https://www.fusetools.com/docs/fuse/visual/isenabled) property (changing it to false essentially) on a visual from within an `WhileActive` on a `Page` that you don’t want the edge to be active on.

However, again - there’s not much else we can suggest unless you share some code and explain what you have tried to do so far.

---

<div class="post-metadata">

**Author:** ![SvenWS](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/svenws/32/325_2.png) [@SvenWS](https://forums.fusetools.com/u/SvenWS)\
**Post date:** [September 11, 2017, 8:12am UTC](https://forums.fusetools.com/t/disable-edgenavigator-edge/6053/3 "2017-09-11T08:12:57Z")

</div>

Because the whole page structure is nested in the EdgeNavigator, like in the examples, setting IsEnabled is not an option because it’s disabling the whole structure. Think of the Material sidebar examble with a hosted webview. The menu will not visible because the webview is always topmost (native view host). If the page has a top toolbar the edge there is still active. If I have time I will create a small demo.

---

<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:** [September 11, 2017, 8:31am UTC](https://forums.fusetools.com/t/disable-edgenavigator-edge/6053/4 "2017-09-11T08:31:28Z")

</div>

Who said you need to disable _the whole structure_?

As for the last sentence… I understand you’re very busy, but hey, so are we. You will need to invest the time if you expect further assistance.

---

<div class="post-metadata">

**Author:** ![SvenWS](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/svenws/32/325_2.png) [@SvenWS](https://forums.fusetools.com/u/SvenWS)\
**Post date:** [September 17, 2017, 1:13pm UTC](https://forums.fusetools.com/t/disable-edgenavigator-edge/6053/5 "2017-09-17T13:13:50Z")

</div>

So, here is an example:

```
<App>
	<iOS.StatusBarConfig Style="Light" />

	<Router ux:Name="router" />

	<JavaScript>
		var Observable = require("FuseJS/Observable");

		showMenu = Observable(true);

		module.exports = {
			gotoFirst: function() { router.goBack(); showMenu.value = true; },
			gotoSecond: function() { router.push("secondPage"); showMenu.value = false; },
			showMenu: showMenu
		};
	</JavaScript>

	<EdgeNavigator>
	
		<Panel ux:Name="sidebar" Edge="Left" Width="100%" Margin="0,0,56,0" Background="#37474F">
			<Shadow ux:Name="shadow" Angle="180" Distance="8" Size="16" Color="#0000" />
			<ActivatingAnimation>
				<Change shadow.Color="#0004" />
				<Change sidebarFade.Opacity="1" />
			</ActivatingAnimation>
		</Panel>

		<Panel Height="56" Background="#2196F3" Alignment="Top">
			<WhileTrue Value="{showMenu}">
				<Hamburger Alignment="Left">
					<Clicked>
						<NavigateToggle Target="sidebar" />
					</Clicked>
				</Hamburger>
			</WhileTrue>
		</Panel>
		<Rectangle ux:Name="sidebarFade" Layer="Overlay" Color="#0005" Opacity="0" HitTestMode="None" />

		<Page ux:InnerClass="aPage">
			<Clicked>
				<NavigateToggle Target="sidebar" />
			</Clicked>
		</Page>

		<DockPanel Margin="0,80,0,0">
			<Navigator DefaultPath="firstPage">
				<Page ux:Template="firstPage">
					<StackPanel Alignment="Center">
						<Text Alignment="Center">This is the first page.</Text>
						<Button Text="Second page" Padding="20" Clicked="{gotoSecond}" />
					</StackPanel>
				</Page>
				<Page ux:Template="secondPage">
					<StackPanel Alignment="Center">
						<Text Alignment="Center">This is the second page.</Text>
						<Button Text="go back" Padding="20" Clicked="{gotoFirst}" />
					</StackPanel>
				</Page>
			</Navigator>

		</DockPanel>

	</EdgeNavigator>
</App>

```

On the second page the edge of the Edge Navigator should be inactive.  
Is that possible?

---

<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:** [September 18, 2017, 8:35am UTC](https://forums.fusetools.com/t/disable-edgenavigator-edge/6053/6 "2017-09-18T08:35:05Z")

</div>

Thanks for the complete repro. Much easier to work with!

My first thought looking at this is: _“Why do you want to keep the edge navigator on a page where you don’t need one?”_

There might be a good reason for that, so you’re welcome to explain what that reason is. If there isn’t one, here I modified your code so that the edge navigator only exists on the pages that need it:

```auto
<App>
    <iOS.StatusBarConfig Style="Light" />

    <Router ux:Name="router" />

    <JavaScript>
        module.exports = {
            gotoFirst: function() { router.goBack(); },
            gotoSecond: function() { router.push("secondPage"); },
            gotoThird: function() { router.push("pagesWithEdge", {}, "pageThree", {}); }
        };
    </JavaScript>

    <Navigator DefaultPath="pagesWithEdge">

        <EdgeNavigator ux:Template="pagesWithEdge">

            <Panel ux:Name="sidebar" Edge="Left" Width="100%" Margin="0,0,56,0" Background="#37474F">
                <Shadow ux:Name="shadow" Angle="180" Distance="8" Size="16" Color="#0000" />
                <ActivatingAnimation>
                    <Change shadow.Color="#0004" />
                    <Change sidebarFade.Opacity="1" />
                </ActivatingAnimation>
            </Panel>

            <DockPanel>
                <Rectangle ux:Name="sidebarFade" Layer="Overlay" Color="#0005" Opacity="0" HitTestMode="None" />
                <Panel Height="56" Background="#2196F3" Dock="Top">
                    <Panel Width="56" Alignment="Left" Color="#fffa">
                        <Clicked>
                            <NavigateToggle Target="sidebar" />
                        </Clicked>
                    </Panel>
                </Panel>
                <Navigator DefaultPath="pageOne">
                    <Panel ux:Template="pageOne">
                        <StackPanel Alignment="Center">
                            <Text Alignment="Center">This is a page WITH edge.</Text>
                            <Button Text="Open another page WITH edge" Padding="20" Clicked="{gotoThird}" />
                            <Button Text="Open page WITHOUT edge" Padding="20" Clicked="{gotoSecond}" />
                        </StackPanel>
                    </Panel>
                    <Panel ux:Template="pageThree">
                        <StackPanel Alignment="Center">
                            <Text Alignment="Center">This is another page WITH edge.</Text>
                            <Button Text="go back" Padding="20" Clicked="{gotoFirst}" />
                        </StackPanel>
                    </Panel>
                </Navigator>
            </DockPanel>
        </EdgeNavigator>

        <Page ux:Template="secondPage">
            <StackPanel Alignment="Center">
                <Text Alignment="Center">This is a page WITHOUT edge.</Text>
                <Button Text="go back" Padding="20" Clicked="{gotoFirst}" />
            </StackPanel>
        </Page>

    </Navigator>

</App>

```

---

<div class="post-metadata">

**Author:** ![SvenWS](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/svenws/32/325_2.png) [@SvenWS](https://forums.fusetools.com/u/SvenWS)\
**Post date:** [September 18, 2017, 9:06am UTC](https://forums.fusetools.com/t/disable-edgenavigator-edge/6053/7 "2017-09-18T09:06:58Z")

</div>

Good point. The challange came up with the web view.  
Here the long story:  
From ui pesperktive the hamburger menu should be reachable form every view. But the web view is always topmost. The use case is selecting a pdf and display it with the web view. The navigation framework (title bar, back buttons, etc.) should stay 'cause it’s not a page thing. So the user known interface is the go back mimic: the hamburger is replaced with the \< sign. In this case the edge has to be disabled.

---

<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:** [September 18, 2017, 9:10am UTC](https://forums.fusetools.com/t/disable-edgenavigator-edge/6053/8 "2017-09-18T09:10:55Z")

</div>

You can still achieve all that with the code that I posted. All you need to do is either add a component-local top bar on that page without edge (I deliberately left it completely empty), or change the whole structure so that there’s a global top bar.

---

<div class="post-metadata">

**Author:** ![arimpranata](https://avatars.discourse-cdn.com/v4/letter/a/977dab/32.png) [@arimpranata](https://forums.fusetools.com/u/arimpranata)\
**Post date:** [November 24, 2017, 4:18am UTC](https://forums.fusetools.com/t/disable-edgenavigator-edge/6053/9 "2017-11-24T04:18:45Z")

</div>

Hi…How can I put menu/button on the edge, click the button, edge close automatically then goto page without edge…helpppppp

---

<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:** [November 24, 2017, 7:57am UTC](https://forums.fusetools.com/t/disable-edgenavigator-edge/6053/10 "2017-11-24T07:57:35Z")

</div>

@arimpranata: please make a new forum post and share the code you have written so far. It’s impossible to help without a complete, minimal reproduction, and you shouldn’t hijack other threads.

---

<div class="post-metadata">

**Author:** ![arimpranata](https://avatars.discourse-cdn.com/v4/letter/a/977dab/32.png) [@arimpranata](https://forums.fusetools.com/u/arimpranata)\
**Post date:** [November 24, 2017, 8:11am UTC](https://forums.fusetools.com/t/disable-edgenavigator-edge/6053/11 "2017-11-24T08:11:48Z")

</div>

@Uldis  
No im not hijack the thread  
Im asking on your code!  
See above, your code…i try it and i know this is what i want…but, then i realize on the edge menu there is no menu/button at all…how can i add button that when i click it…the edge close then goto new page without edge…

I guess no need new thread for replay your answer…

Thanks

---

<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:** [November 24, 2017, 8:15am UTC](https://forums.fusetools.com/t/disable-edgenavigator-edge/6053/12 "2017-11-24T08:15:26Z")

</div>

@arimpranata: your question is in no way related to the question asked originally on this thread. It does not matter if it’s about the code posted here.

See [this example](https://www.fusetools.com/examples/material-drawer) for adding a button. See [Tutorial](https://www.fusetools.com/docs/tutorial/navigation-and-routing) for navigation.

If you have more questions, ask them in a new forum post.