Perspective Horizontal Menu Component

#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
pinned #2
0 Likes
#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
0 Likes
#4

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

-Josh

0 Likes
#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.

0 Likes
#6

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

0 Likes
#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.

0 Likes
#8

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

0 Likes
#9

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

0 Likes
#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.

0 Likes
#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!

0 Likes
#13

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

1 Like