A nested navigation or nested menu is a popular solution for effectively organizing collections, products, and pages. This example will output a nested menu of links in an unordered list up to three levels deep, all of which can be easily updated using the Shopify Admin. Nested navigation uses the Shopify linklist object.
- Place the following code in the
Sections/header.liquidfile, or wherever you wish the nested navigation to appear. - If used in a section, you can also create a settings option in the section schema, and replace the for-loop in this example with ``` {% for link in linklists[section.settings.main_linklist].links %} ``` where main_linklist is the id of the schema setting. This setting would specify a link_list picker, and the default value would be set to main-menu.
- Add relevant classes and styles to create dropdown functionality via CSS.
https://shopify.github.io/liquid-code-examples/example/nested-navigation
Please note: We have intentionally limited CSS and JavaScript and removed translation strings in order to keep these examples compatible with any theme. Any CSS we have included is for accessibility or rendering purposes.
Top comments (0)