How to add plain text under specific menu item in Drawer Menu

Store Design
, ,

Topic summary

Goal: Show unclickable, plain text separators above specific items in a Shopify drawer (slide-out) navigation menu.

Initial suggestion: Create separate sub-menus for groups (e.g., TOPS/BOTTOMS/MISC) via Navigation and render them in the drawer template (header.liquid/drawer.liquid/snippet) using Liquid (Shopify’s templating language), with a .drawer-menu-header CSS style. Result: This produced sub-menus, not plain, non-clickable text.

Final solution (accepted): Insert a conditional inside the existing loop in header-drawer.liquid (under “for link in section.settings.menu.links”) to output static text when link.title matches a target item (e.g., “Insert Collection Title here”). Style that text via a .drawer-text rule in component-menu-drawer.css (font family, size, color) so it remains unclickable.

Outcome: Resolved; the method adds plain text labels above chosen menu links without creating new sub-menus. The included image was illustrative of layout only; code changes in Liquid and CSS are sufficient.

Summarized with AI on December 21. AI used: gpt-5.
2

Hi @StudioBlank ,

Please see the solution below:

To add text under a specific menu item in a Shopify Drawer Menu, you can edit the theme’s code.

Step 1:

Create separate sub-menus for “TOPS,” “BOTTOMS,” and “MISC” under Online Store > Navigation.

Step 2:

Locate the file where the drawer menu is defined, such as header.liquid, drawer.liquid, or a specific snippet like menu-drawer.liquid.

Update the code as below:


    {% assign tops_menu = linklists['tops-menu'] %}
    {% assign bottoms_menu = linklists['bottoms-menu'] %}
    {% assign misc_menu = linklists['misc-menu'] %}

    
    {% if tops_menu.links.size > 0 %}
      - TOPS

      {% for link in tops_menu.links %}
        - {{ link.title }}

      {% endfor %}
    {% endif %}

    
    {% if bottoms_menu.links.size > 0 %}
      - BOTTOMS

      {% for link in bottoms_menu.links %}
        - {{ link.title }}

      {% endfor %}
    {% endif %}

    
    {% if misc_menu.links.size > 0 %}
      - MISC

      {% for link in misc_menu.links %}
        - {{ link.title }}
      {% endfor %}
    {% endif %}

Step3:

Locate theme.css or theme.scss.liquid or styles.css or style.scss.liquid

Add the below css code:

.drawer-menu-header { 
font-size: 14px;
font-weight: bold; 
margin-top: 15px; 
margin-bottom: 5px; 
color: #333; 
}

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,

Sweans