Skip to content
Permalink
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
javascript-developer-guide
3_Widgets
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 {#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.