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