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.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more