Perspective Horizontal Menu Component

Ignition Early Access
#1

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/”). 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/”.
  • 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

6 Likes
#2
#3

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
#4

Thanks for trying out the component; your feedback is helpful and very appreciated!

-Josh

#5

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.

#6

Are you able to post a screenshot or video of the issue as well as the config you are using?

#7

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.

#8

Gotcha. That definitely illustrates the issue. Thanks for the feedback!

#9

Another thing, you cant seem to change the colour of the buttons, is this intended?

#10

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.

#11

@Rhys_m This feature was added in the 8.0.5 nightly build that was uploaded today (9/12).

2 Likes
#12

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!

#13

Hi @daniel.chambers; good request! I will open a ticket to make this fix.

1 Like
#14

We were unable to replicate this issue on 8.0.7. Are you still seeing this incidental click issue on more recent builds?

#15

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).

#16

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?

#17

Is it possible to navigate to a view without creating a page URL ?

If i try “/MyView” i get view not found.

#18

@craigb: The Horizontal Menu does not currently allow for navigating to Views. We have an open ticket to address this.

#19

@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.

#20

Good to hear. That is where I am headed with it…

1 Like