# Perspective: How to use Horizontal Menu without page links **URL:** \ **Category:** Ignition\ **Tags:** ignition80, perspective\ **Created:** [August 18, 2020, 12:05pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-horizontal-menu-without-page-links/37850 "2020-08-18T12:05:39Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [August 18, 2020, 12:05pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-horizontal-menu-without-page-links/37850/1 "2020-08-18T12:05:39Z")
v8.0.15 I want to use the horizontal menu to change a session custom property and display as selected when clicked. I can bind to each of the items’ styles for the display (little bit inconvenient but it will work), however I’m not sure how to do the writing to the session property? Also, when I tap on the buttons on mobile, it keeps selecting the button text and then chrome brings up the “search the internet for the selected text” prompt at the bottom… can I disable selecting text? ---
**Author:** ![David\_Nicks](https://avatars.discourse-cdn.com/v4/letter/d/8491ac/32.png) [@David\_Nicks](https://forum.inductiveautomation.com/u/David_Nicks)\ **Post date:** [June 16, 2024, 3:44am UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-horizontal-menu-without-page-links/37850/2 "2024-06-16T03:44:14Z")
Does this help? > [@Perspective Horizontal Menu - Passing Parameters](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-passing-parameters/65392/7): > > I had a similar issue and developed a fairly decent workaround. In my situation, I have a parent view with an embedded view that is used to host custom content for equipment that is organized in a hierarchy. There is a session custom prop that points to the id of the current location in the hierarchy, and the embedded view path is bound to a query that uses that id to return the path to a corresponding sub-view. The horizontal menu is bound to a query that uses the same id to return data about… ---
**Author:** ![David\_Nicks](https://avatars.discourse-cdn.com/v4/letter/d/8491ac/32.png) [@David\_Nicks](https://forum.inductiveautomation.com/u/David_Nicks)\ **Post date:** [June 16, 2024, 4:22pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-horizontal-menu-without-page-links/37850/3 "2024-06-16T16:22:44Z")
Ugh, I am _this close_ to what I'm looking for, I just can't get the pop-up submenus to close after the user clicks on them. I've tried all sorts of things in the `onItemClicked` event script - including setting `props.items=[]`, refreshing the binding to `props.items`, setting `position.display=False`, `meta.visible=False`, navigating to a new view (this doesn't work because my horizontal menu is on a north dock), even `system.perspective.closeDock` (a bizarre fail because the dock disappeared but left the horizontal menu on the screen, overlaying the primary view until I clicked outside the menu). The only thing that closes the pop-up menus is a full refresh, which is way too disruptive. I wonder if @cmallonee, @paul-griffith, @victordcq, or @pascal.fragnoud have any tricks up their sleeve that could help. To summarize: the goal is to use the horizontal menu not for navigation, but to set a session custom property value (which in my case is used to 'navigate' a functional location hierarchy that influences application behavior and filtering of datasets across many pages). The horizontal menu has a lot of valuable built-in functionality that would be hard to recreate from scratch (scroll arrows, dynamic pop-up submenus that auto-size and auto-position correctly, etc.) We can exploit the `item.target` value in the `onItemClicked` event to update the session custom property, but the horizontal menu component assumes the click will be followed by a navigation event that rebuilds the menu, so no cleanup is done post-click. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [June 16, 2024, 7:34pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-horizontal-menu-without-page-links/37850/4 "2024-06-16T19:34:33Z")
If you're trying to use a Navigation component for something other than Navigation, then your best course of action is to build your own component. The Horizontal Menu could be impersonated by a Flex Container with internal Labels which each open a relatively positioned modal. The referenced Modal would need to accept parameters, and would itself be a Flex Container which has Labels. This would leave only the scroll arrows for you to handle, though these could also be impersonated by Icons as the first/last components in the Flex Container. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [June 17, 2024, 6:10am UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-horizontal-menu-without-page-links/37850/5 "2024-06-17T06:10:21Z")
I tend to agree with @cmallonee here: If it requires to jump through hoops to hack a component into doing something else than what it was intended to do... Just rebuild one yourself that's adapted to your needs. It might seem like more work at first, but how much time have you invested into this already ? And yet you're stuck on something that wouldn't be an issue with your own component. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [June 17, 2024, 6:59am UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-horizontal-menu-without-page-links/37850/6 "2024-06-17T06:59:18Z")
When i click on a menu item it closes everything? What version are you using? Got a copy of the view? and a video of what is going wrong Edit ah read the other topic, you are trying to use the target as a variable for your page... that wont work, You are gonna be better of to use the title and / or path as a key to a list of variables/params ---
**Author:** ![David\_Nicks](https://avatars.discourse-cdn.com/v4/letter/d/8491ac/32.png) [@David\_Nicks](https://forum.inductiveautomation.com/u/David_Nicks)\ **Post date:** [June 17, 2024, 1:54pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-horizontal-menu-without-page-links/37850/7 "2024-06-17T13:54:52Z")
Yeah I stood at that fork in the road several hours ago and wound up thinking, "why build all of this stuff from scratch when the horizontal menu seems to have it all built-in from the start?" I didn't realize that the browser navigation behavior was as rigid as it is. > [@cmallonee](#): > > If you're trying to use a Navigation component for something other than Navigation Actually, I _am_ using it for navigation - just not directly at the page/URL/view level. It's very much a navigation of a data hierarchy, and the standard component functionality lines up very well with what is being navigated. Mostly. > [@cmallonee](#): > > This would leave only the scroll arrows for you to handle, though these could also be impersonated by Icons as the first/last components in the Flex Container. Ah, that's the tricky part. How will the component be able to tell how many items fit in the container width and thus when & where to insert the icons? And how will this behave responsively so the items are rebuilt and arrows shifted as the window size changes (e.g. rotating a tablet from portrait to landscape)? Even the native horizontal menu struggles to handle this. This is the point during blueprinting where I decided the horizontal menu would probably save me a ton of time. I'll post a suggestion on the [ideas page](http://ideas.inductiveautomation.com/). Seems like it wouldn't be too hard to add a couple of properties to each props.item object in the menu. One being a switch that supresses the default browser navigation action, and the second being a data object that could hold whatever custom data the user wants to access on the `onItemClicked` event. Would probably make sense to add this to the vertical menu component also. ---
**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\ **Post date:** [August 27, 2024, 8:12pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-horizontal-menu-without-page-links/37850/8 "2024-08-27T20:12:33Z")
> [@cmallonee](#): > > The Horizontal Menu could be impersonated by a Flex Container with internal Labels which each open a relatively positioned modal. I want to use Horizontal Menu, to launch a popup instead of navigating. Are you certain that I can build my own component that mimics horizontal menu? I am certain that there is no way to open popup (aligned) directly below the button on a flex container. Am I wrong? ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [August 27, 2024, 9:47pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-horizontal-menu-without-page-links/37850/9 "2024-08-27T21:47:41Z")
Use a container instead, set the overflow of its parent container to `visible` and let your sub-menu overflow. It can be a bit tricky to get right, depending on how complex the whole thing needs to be, but I've used this a few times. It helps if you're comfortable with css. ---
**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\ **Post date:** [August 27, 2024, 10:39pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-use-horizontal-menu-without-page-links/37850/10 "2024-08-27T22:39:41Z")
> [@Dropdown Popup over flex container](https://forum.inductiveautomation.com/t/dropdown-popup-over-flex-container/82212/7): > > Don't worry about it. Make the view as high as the base text field and button, something like 32px I guess. On the root container, add a overflow: visible style. Then make the options panel where ever you want, outside of the view's boundaries. When you place your dropdown in a view, check the useDefaultViewHeight property, make sure the embedded view is the right height (32px), and add the overflow: visible property here as well. Make sure it's on top of other components by clicking [image… I stand corrected. I revisited this, and I only made it work now. @pascal.fragnoud Any tips how to dismiss, when click outside?