DEV Community

Cover image for How to create a custom header menu in Shopify
 My Code Magic
My Code Magic

Posted on

3 2

How to create a custom header menu in Shopify

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.

  1. Place the following code in the Sections/header.liquid file, or wherever you wish the nested navigation to appear.
  2. 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.
  3. Add relevant classes and styles to create dropdown functionality via CSS.

Alt Text
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.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay