Navigation widget

Overview

Magento navigation widget is a customized jQuery UI Menu widget. Magento navigation extends the default functionality with the following:

  • Expanding all layers of the menu tree past the second layer.
  • Limiting the maximum number of list items contained within the main navigation (overflow items are placed into a secondary navigation level).
  • Method for handling the responsive layout of the menu.

The navigation widget source is lib/web/mage/menu.js

For information about how to initialize a widget in a JS component or .phtml template, see the Initialize JavaScript topic.

The navigation widget has the following options:

breakpoint

Width of user’s window in px for which the menu switches between mobile view and desktop view.

Type: Number

Default value: 768

container

Container to track the menu overflow on responsive navigation.

Type: String

Default value: #menu

maxItems

The number of top level navigational items in main menu.

Type: Number

Default value: null

moreText

Set the text for the overflow menu (i.e. more)

Type: String

Default value: more

responsiveAction

The default responsive handler for the navigation widget.

Type: String

Default value: 'wrap'

Accepted values: wrap, onResize, onLoad

Moves the list items that are more than the total max item number set by the user option.

Builds the more overflowing menu by cloning the main menu items.