# Perspective Horizontal Menu Component **URL:** \ **Category:** Ignition Early Access\ **Created:** [May 23, 2019, 6:11pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269 "2019-05-23T18:11:51Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\ **Post date:** [May 23, 2019, 6:11pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/1 "2019-05-23T18:11:51Z")
An upcoming nightly build will introduce a new Perspective Navigation component; the Horizontal Menu. This component allows you to build a menu structure that occupies a large amount of horizontal space and a small amount of vertical space in the interface. The menu starts with a list of root-level menu items that make up the main display area of the component. If there are more menu items than can display within the width of the component, arrow buttons will be presented to allow you to scroll the control to the left and right to display any hidden menu items. The control can also be disabled as a whole. Each menu item can be configured with a target that will serve as either a link to a view that should be shown (i.e. _“/some-view”_), or a link to an external web page (i.e. _“[http://www.google.com/”](http://www.google.com/%E2%80%9D)_). They can also be given a list of child menu items that will show temporarily in a popup as the user is interacting with them. Additionally, menu items can be labeled, disabled, and be given an icon to show to the left of their label. ### Main Component Config: - **enabled** : (_boolean_) The enabled state of the component. - **items** : (_Menu Item Config_) The root-level menu items to display. - **style** : (_Component Style Config_) Any styling to apply to the component. ### Menu Item Config: - **enabled** : (_boolean_) The enabled state of the menu item. - **items** : (_Menu Item Config_) If provided, the child-level menu items to display when clicked. - **target** : (_string_) If provided, the action to be taken when clicked. If a view should be shown, an example target would be _“/some-view”_. If an external web page should be shown, an example target would be _“[http://www.google.com/”](http://www.google.com/%E2%80%9D)_. - **label** : (_string_) The label of the menu item. - **icon** : (_object_) If provided, the icon to be shown to the left of the label. - **icon.path** : (_string_) The path to the icon repository and icon in the repo to be shown. If using the built-in Material icon repo, an example path would be _“material/link”_. - **icon.color** : (_string_) A hex version of the color that the icon should be made. If a gray color is desired, and example would be _“#6C6C6C”_. Give it a whirl and please respond to this thread if you have any questions or comments! -Josh ---
**Author:** ![awalker](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/awalker/32/6874_2.png) [@awalker](https://forum.inductiveautomation.com/u/awalker)\ **Post date:** [May 23, 2019, 6:43pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/2 "2019-05-23T18:43:27Z")
Pinned on May 23, 2019, 6:43pm UTC ---
**Author:** ![Tumeksi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tumeksi/32/4697_2.png) [@Tumeksi](https://forum.inductiveautomation.com/u/Tumeksi)\ **Post date:** [May 27, 2019, 7:29am UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/3 "2019-05-27T07:29:55Z")
Feature request: Ability to change the menu items from “navigation button” to one of the following: - Navigation item (as it is now) - Button that runs a script - Embedded view ---
**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\ **Post date:** [May 28, 2019, 4:01pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/4 "2019-05-28T16:01:15Z")
Thanks for trying out the component; your feedback is helpful and very appreciated! -Josh ---
**Author:** ![Rhys\_m](https://avatars.discourse-cdn.com/v4/letter/r/13edae/32.png) [@Rhys\_m](https://forum.inductiveautomation.com/u/Rhys_m)\ **Post date:** [June 14, 2019, 3:35pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/5 "2019-06-14T15:35:31Z")
not sure if I am missing a setting, but if the array of sub items is greater than the height of the display then the list appears in the middle of the window and horizontally rather than vertically. ---
**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\ **Post date:** [June 17, 2019, 3:55pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/6 "2019-06-17T15:55:44Z")
Are you able to post a screenshot or video of the issue as well as the config you are using? ---
**Author:** ![Rhys\_m](https://avatars.discourse-cdn.com/v4/letter/r/13edae/32.png) [@Rhys\_m](https://forum.inductiveautomation.com/u/Rhys_m)\ **Post date:** [June 17, 2019, 4:11pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/7 "2019-06-17T16:11:46Z")
I cant post the actual link but here is a quick example I created, its just using the default component with the link to google item duplicated multiple times, so here the config is no different to default, I have spent a few hours yesterday trying various adjustments. For reference I would expect it to act as the vertical menu does, where it gains a scroll bar if it goes out of the container. where we are listing machines/lines some cases we have around 30 items, so for now have moved to the vertical menu bar. ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/f/f95e1830002c5c9ad75a01c3da3f71944dc5dbc9.gif) ---
**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\ **Post date:** [June 17, 2019, 5:09pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/8 "2019-06-17T17:09:16Z")
Gotcha. That definitely illustrates the issue. Thanks for the feedback! ---
**Author:** ![Rhys\_m](https://avatars.discourse-cdn.com/v4/letter/r/13edae/32.png) [@Rhys\_m](https://forum.inductiveautomation.com/u/Rhys_m)\ **Post date:** [August 16, 2019, 2:49pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/9 "2019-08-16T14:49:42Z")
Another thing, you cant seem to change the colour of the buttons, is this intended? ---
**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\ **Post date:** [August 16, 2019, 4:22pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/10 "2019-08-16T16:22:09Z")
Hi @Rhys_m, in an upcoming nightly, you’ll be able to apply style to each individual menu item, if desired. I will update this thread when that update gets into a nightly. ---
**Author:** ![awalker](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/awalker/32/6874_2.png) [@awalker](https://forum.inductiveautomation.com/u/awalker)\ **Post date:** [September 12, 2019, 3:29pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/11 "2019-09-12T15:29:04Z")
@Rhys_m This feature was added in the 8.0.5 nightly build that was uploaded today (9/12). ---
**Author:** ![kirsten.chambers](https://avatars.discourse-cdn.com/v4/letter/k/48db29/32.png) [@kirsten.chambers](https://forum.inductiveautomation.com/u/kirsten.chambers)\ **Post date:** [November 6, 2019, 7:40pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/12 "2019-11-06T19:40:01Z")
After holding down the scroll buttons and having them disappear at the end of the menu, whatever button was underneath them often gets incidentally clicked (which is especially a problem on mobile where the scroll buttons are more likely to be used). Even if the onItemClicked event doesn’t fire, the button gets selected making it look like it did. Would it be possible to get click protection when the scroll buttons disappear? I’ve worked around the issue for now by making dummy spacer buttons, but they take up real estate even when the scroll bars aren’t needed. Thanks! ---
**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\ **Post date:** [November 6, 2019, 8:50pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/13 "2019-11-06T20:50:40Z")
Hi @kirsten.chambers; good request! I will open a ticket to make this fix. ---
**Author:** ![Paul.Scott](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul.scott/32/4578_2.png) [@Paul.Scott](https://forum.inductiveautomation.com/u/Paul.Scott)\ **Post date:** [January 9, 2020, 4:42pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/14 "2020-01-09T16:42:16Z")
> [@kirsten.chambers](#): > > After holding down the scroll buttons and having them disappear at the end of the menu, whatever button was underneath them often gets incidentally clicked We were unable to replicate this issue on 8.0.7. Are you still seeing this incidental click issue on more recent builds? ---
**Author:** ![kirsten.chambers](https://avatars.discourse-cdn.com/v4/letter/k/48db29/32.png) [@kirsten.chambers](https://forum.inductiveautomation.com/u/kirsten.chambers)\ **Post date:** [January 9, 2020, 5:09pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/15 "2020-01-09T17:09:43Z")
I am now on a nightly 8.0.8 snapshot (b2020010702). I can’t replicate the issue anymore on desktop, but on mobile (specifically, Chrome’s developer mode), I still get the accidental click when scrolling all the way to one end or the other (and the occasional context menu pop-up when the menu scrolls for long enough, though I’m not sure if that can be addressed). I’ve made a workaround by having dummy items appear that eat the click whenever the menu gets long enough, which has solved an additional problem where the item underneath the scroll arrow buttons is highlighted after the scroll button disappears, making it look as if the item has been pressed even if it hasn’t (which, in my use case, can be scary). ---
**Author:** ![wking](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/wking/32/21823_2.png) [@wking](https://forum.inductiveautomation.com/u/wking)\ **Post date:** [January 20, 2020, 3:43pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/16 "2020-01-20T15:43:40Z")
Is it possible to control the visible prop or display prop of an item? It would be nice to bind these to security zone/role or whatever? am I missing something? ---
**Author:** ![craigb](https://avatars.discourse-cdn.com/v4/letter/c/9f8e36/32.png) [@craigb](https://forum.inductiveautomation.com/u/craigb)\ **Post date:** [January 21, 2020, 4:45pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/17 "2020-01-21T16:45:00Z")
Is it possible to navigate to a view without creating a page URL ? If i try “/MyView” i get view not found. ---
**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:** [January 21, 2020, 4:52pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/18 "2020-01-21T16:52:11Z")
@craigb: The Horizontal Menu does not currently allow for navigating to Views. We have an open ticket to address this. ---
**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:** [January 21, 2020, 4:53pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/19 "2020-01-21T16:53:14Z")
@wking: There is no such prop right now. As a workaround, you could generate the items/paths at View startUp, and wrap the user’s permissions into the logic. ---
**Author:** ![wking](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/wking/32/21823_2.png) [@wking](https://forum.inductiveautomation.com/u/wking)\ **Post date:** [January 21, 2020, 4:55pm UTC](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269/20 "2020-01-21T16:55:10Z")
Good to hear. That is where I am headed with it… [Next page](https://forum.inductiveautomation.com/t/perspective-horizontal-menu-component/25269.md?page=2)