How to create a drop down menu in yml using jekyll

Question

I have code that displays buttons on navbar. On one of the buttons I would like to add a drop down menu. I've already added the code for the drop down in my navigation.yml file, but I am having issues adding it in my jekyll html file. Below is part of the code that shows the navigation bar with button links. I just need help adding the drop down menu code.

-----html file-----

<ul class="visible-links">
              {%- for link in site.data.navigation.main -%}
                <li class="masthead__menu-item">
                  <a href="{{ link.url | relative_url }}"{% if link.description %} title="{{ link.description }} "{% endif %}>{{ link.title }}</a>
                </li>
              {%- endfor -%} 
</ul>

---navigation.yml file------

- title: "Contact Us"
    sublinks:
      - title: "Text goes here"
        url: "#"
      - title: "Text goes here"
        url: "#"
      - title: "Text goes here"
        url: "#"

I'm not that familiar with Jekyll, so any help is needed.

Thanks,

score 3 · Answer 1 · answered Jun 08 '22 at 18:38

See the menu.yml file

primary:
  - title: Main Menu
    subfolderitems:
      - name: "Home"
        url: "../"
        weight: 2
      - name: "Pages"
        url: "#"
        weight: 3
        subsubfolderitems:
          - name: "About"
            url: "/about/"
            weight: 2
          - name: "Pricing"
            url: "/pricing/"
            weight: 2
          - name: "Faq's"
            url: "/faq/"
            weight: 2
          - name: "Contact"
            url: "/contact/"
            weight: 2
          - name: "Testimonial"
            url: "/testimonial/"
            weight: 2
          - name: "404"
            url: "/404/"
            weight: 2
      - name: "Blog"
        url: "#"
        weight: 3
        subsubfolderitems:
          - name: "Blog Listing"
            url: "/blog/"
            weight: 2
          - name: "Blog Single"
            url: "/adum-software-industry-how-achive-the-goal/"
            weight: 2
      - name: "Contact"
        url: "/contact/"
        weight: 2

See the dropdown query file. You need to write some css style for the menu

<nav class="header-menu" id="header-menu">
                     {% if site.data.menus.primary[0] %}
                        {% for item in site.data.menus.primary %}
                           {% if item.subfolderitems[0] %}
                              <ul class="menu">
                              {% for entry in item.subfolderitems %}
                                    <li class="{% if entry.subsubfolderitems[0] %}has-sub{% endif %} menu-item">
                                       <a class="menu-link nav-link {% if entry.subsubfolderitems[0] %}menu-toggle{% endif %}" href="{{ entry.url }}">{{ entry.name }}</a>
                                       {% if entry.subsubfolderitems[0] %}
                                          <ul class="menu-sub menu-drop">
                                             {% for subentry in entry.subsubfolderitems %}
                                                <li class="menu-item">
                                                   <a class="menu-link nav-link" href="{{ subentry.url }}">{{ subentry.name }}</a>
                                                </li>
                                             {% endfor %}
                                          </ul>
                                       {% endif %}
                                    </li>
                              {% endfor %}
                              </ul>
                           {% endif %}
                        {% endfor %}
                     {% endif %}                    
                 </nav>

While helpful, it would be nice if this comment included any explanation or context for the code snippets. This partly answered a question I had, but there's zero information here to help learn how/why you came to this solution. — Charbrec, Aug 07 '23 at 15:37

How to create a drop down menu in yml using jekyll

1 Answers1