Sidebar Navigation with Subcategories

[dan8]

Hi everybody,

im not sure if this is the right section in forum but i just hope im fine here 🙂

I wanted to ask if it is possible to create a sidebar navigation on the collection page which includes the subcollections..

Here is an example:

https://imgur.com/IdJgRqZ

(this is from everlane.com)

Is there any way to do this in shopify?

Greets,

Daniel

[Maggie_M]

Hi Daniel!

Maggie here, Shopify Guru. 🙂

Great question. What you're showing here in this screenshot looks like it's just a drop-down menu! You can absolutely set these up with any theme on Shopify, and it's set up in your Shopify Admin > Online Store > Navigation section. Here's a walk-through doc and a video on how this works!

The second aspect of this would be the sidebar menu rather than a top header menu. This could likely be achieved on any theme with some custom code work, but in case you aren't already committed to a particular theme, I would recommend checking out some themes that already have this side menu built in!

Here's a few I found:

• Pop
• Simple
• Kingdom
• Vogue

Hope this helps! You can contact support 24/7 if you have any more questions!

[dan8]

Hi Maggie,

thanks for that anwser!

The Sidebar in the "Simple" Theme is basicly what i need.

I´m just no sure on how to Display the collection as active and get the nested links to it.

*EDIT*

ok i managed to exclude the code for the sidebar.

I tried to remove the option to change the menu iin the "customize theme" and set a fixed nagivation. I mean replace the liquid variables for the navigation with one preset navigation. Could you give me a hint on how to do that?

<div data-section-id="sidebar" data-section-type="sidebar-section">
  <nav class="grid__item small--text-center medium-up--one-fifth" role="navigation">
    <div id="SiteNav" class="site-nav" role="menu">
      <ul class="list--nav">
        {% for link in menus[section.settings.main_menu_link_list].links %}
          {% assign child_list_handle = link.title | handleize %}
          {% if menus[child_list_handle].links != blank %}
            <li class="site-nav--has-submenu site-nav__element">
              <button class="site-nav__link btn--link">
                {{ link.title }}
              </button>
              <ul  class="site-nav__submenu">
                {% for childlink in menus[child_list_handle].links %}
                  <li class="{% if childlink.active or collection.current_type == childlink.title or collection.current_vendor == childlink.title %}{% unless forloop.first and childlink.title contains 'All' and current_tags.size > 0 %} site-nav--active {% endunless %}{% endif %}">
                    <a href="{{ childlink.url }}" class="site-nav__link">{{ childlink.title | escape }}</a>
                  </li>
                {% endfor %}
              </ul> 
            </li>
          {% else %}
            <li class="site-nav__element {% if link.active %}site-nav--active{% endif %}">
              <a href="{{ link.url }}" class="site-nav__link">{{ link.title }}</a>
            </li>
          {% endif %}
        {% endfor %}
      </ul>

    </div>
  </nav>
</div>

{% schema %} 
  {
    "name": "Sidebar",
    "settings": [
      {
        "type": "link_list",
        "id": "main_menu_link_list",
        "label": "Menu",
        "default": "main-menu"
      }
    ]
  }
{% endschema %}

basicly i want to to remove the schema and set the main menu as the navigation.

Sorry, i am fairly new to shopify. Forvige the illiteracy please 😛

[dan8]

Ok i got! working perectly! 😃

Thank you very much for providing me with the themelinks!!

[Adam_Smith2]

Hi Dan,

Where did you start to get this side bar? Ideally i would like the same like a nested sidebar to show the below with the bold sections being expandable.

Sleeved Cables

            Full Set

            24 Pin

            8 Pin CPU

            8 pin GPU

            SATA Cables

Case Fans

            120mm

            140mm

LED's 

            NZXT Hue+

            LED Strips

            Controllers

[ecomtom]

It's not a drop down menu. It puts the groups on a sidebar on a collections page.

[mhc]

I currently have the "simple" theme installed, and my menu/navigation items are at the top of the page, not on the left hand side as the demo photo clearly shows. I have gone into "Customize" as I'm pretty sure there is no option to change the position of these menu items/groups to the left hand side without playing around with CSS. Am I missing something?

[shwetart]

Hi,

I want to do a side bar navigation for different blog posts and tags. How do I achieve thi

[Davi3]

Click to expand...

I would also like to do