Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
87 lines (53 sloc) 2.32 KB
group subgroup title
Navigation widget


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 {#navigation_init}

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

Options {#navigation_options}

The navigation widget has the following options:

breakpoint {#n_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 {#n_container}

Container to track the menu overflow on responsive navigation.

Type: String

Default value: #menu

maxItems {#n_maxItems}

The number of top level navigational items in main menu.

Type: Number

Default value: null

moreText {#n_moreText}

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

Type: String

Default value: more

responsiveAction {#n_responsiveAction}

The default responsive handler for the navigation widget.

Type: String

Default value: 'wrap'

Accepted values: wrap, onResize, onReload

Methods {#navigation_methods}

setMaxItems() {#nav_setMaxItems}

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

setupMoreMenu() {#nav_setupMoreMenu}

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

[lib/web/mage/menu.js]: {{ site.mage2bloburl }}/{{ page.guide_version }}/lib/web/mage/menu.js [Initialize JavaScript]: {{page.baseurl}}/javascript-dev-guide/javascript/js_init.html

You can’t perform that action at this time.