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

Initialize the navigation widget

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

Options

The navigation widget has the following options:

• breakpoint
• container
• maxItems
• moreText
• responsiveAction

breakpoint

Width of user鈥檚 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

Methods

• setMaxItems()
• setupMoreMenu()

setMaxItems()

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

setupMoreMenu()

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