Main Nav Support Drop down about flynt

[timohubois]

I did a short test. To get all 2 level elements inside the navigation you can use the following snipped inside the index.twig from the NavigationMain Component:

<nav class="flyntComponent" is="flynt-navigation-main">
	<div class="wrapper">
		<div class="container centerMaxWidthContainer">
			<a class="logo" href="{{ site.link }}">
				<div class="logo-site-name">{{ site.name|trim }}</div>
				<div class="logo-site-description">{{ site.description|trim }}</div>
			</a>
			{% if menu %}
				<ul class="menu">
					{% for item in menu.items %}
						<li class="menu-item {{ item.current ? 'menu-item--current' }}">
							<a class="menu-link" href="{{ item.link }}" {{ item.target == '_blank' ? 'target="_blank" rel="noopener noreferrer"' }}>{{ item.title }}</a>
							{# Simple 2 level navigation start #}
              {% if item.get_children %}
								<ul class="menu menu-submenu">
									{% for item in item.get_children %}
										<li class="menu-item {{ item.current ? 'menu-item--current' }}">
											<a class="menu-link" href="{{ item.link }}" {{ item.target == '_blank' ? 'target="_blank" rel="noopener noreferrer"' }}>{{ item.title }}</a>
										</li>
									</ul>
								{% endfor %}
							{% endif %}
              {# Simple 2 level navigation end #}
						</li>
					{% endfor %}
				</ul>
			{% endif %}
		</div>
	</div>
</nav>

Note: This code snipped doesn’t support deeper navigation levels.

I hope this helps.

[timohubois]

I think, the main navigation doesn’t support dropdown items, out-of-the-box and at the moment. But with some customization into the navigation components it shouldn’t something big.

[purchasingtoolpak]

The issue I'm having is that the sub menu (level--1) does not render.

Here is my index.twig file in the Navigation Main folder:

<nav is="flynt-navigation-main" class="flyntComponent">
  <div class="wrapper">
    <div class="container centerMaxWidthContainer">
      <a class="logo" href="{{ site.link }}">
        <img class="logo-image" src="{{ logo.src }}" alt="project-logo">
      </a>
      {% if menu %}
      <nav class="navigation">
        {% include 'menu.twig' with { 'items': menu.get_items, 'level': '0', 'maxLevel': maxLevel } only %}
      </nav>
      {% endif %}
      {% if contentHtml %}
      <div class="content">{{ contentHtml|e('wp_kses_post') }}</div>
      {% endif %}
    </div>
  </div>
</nav>

Here is my include menu.twig file in the Navigation Main:

<ul class="menu menu--level-{{ level }}">
  {% for item in items %}
	{% set hasChildren = item.get_children is defined and item.get_children|length > 0 %}
    <li class="{{ item.classes | join(' ') }}">
      <a class="menu-link" href="{{ item.link }}"{% if item.target %} target="{{ item.target }}"{% endif %}>{{ item.title }}</a>
      
	  {% if hasChildren %}
	  	<p>Yes has children</p>
        
		<ul class="menu menu--level-1">
			<li class="{{ item.classes | join(' ') }}">
      			<a class="menu-link" href="{{ item.link }}"{% if item.target %} target="{{ item.target }}"{% endif %}>
				  {{ item.title }} Contact Us</a></li>
		</ul>
      {% endif %}
    </li>
  {% endfor %}
</ul>

The top level menu works fine. When the main menu has children, {% if hasChildren %) is true. However the sub menu does not appear and the top level menu is repeated. See below for the rendered html:

<nav class="navigation">
  <ul class="menu menu--level-0">
    <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-29 menu-item-has-children">
      <a class="menu-link" href="//localhost:3000/wordpress/about/">About Us</a>
      <p>Yes has children</p>
      <ul class="menu menu--level-1">
        <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-29 menu-item-has-children">
          <a class="menu-link" href="//localhost:3000/wordpress/about/">
            About Us </a></li>[note: top level nav repeats - no sub menu]
      </ul>
    </li>

Any help debugging would be appreciated.

[koukouchris]

@purchasingtoolpak On second level you are still in the {% for item in items %} loop. item is still the first level, second level array lives under item.get_children or item.children not item. Can you try another loop into item.get_children?

Also dumping/printing your data (either twig or in your functions.php) can be helpful when dealing with issues like this to have an overview of where is what. :)

[purchasingtoolpak]

OK, only need 2 levels and this is working great. If you could share the _style.scss that would be appreciated.

THANKS

[timohubois]

@purchasingtoolpak, great to hear that the navigation is working.

There a many ways to style a menu with SCSS and you did not wrote anything about what kind of styles you like to implement.

If you send me an example, I'll see what I can do for you.

And keep in mind that the next step after customizing the main navigation is usually to adjust the mobile navigation ;)

[purchasingtoolpak]

No further concerns here. It would be great if flynt came out of the box with a multi-level menu. Most WordPress themes seem to support. Thanks for all the help on this pixelsaft!

[steffenbew]

@purchasingtoolpak Thanks for your feedback. We're considering to extend the navigation to support multiple levels. In the past, we noticed that there are many different concepts to a multi-level navigation and thus wanted to keep it simple, instead of committing to one specific case.

[CodeConvergence]

Please excuse me for opening this after almost a year.
May I ask @timohubois - is your snippet still relevant for v1.4.?

Using your code I am able to bring in the sub menu items, but the styling of the children loop is so off I'm wondering if there was an update.

[timohubois]

@CodeConvergence by default there is no default styling for a dropdown submenu built in, so that you can style very flexible for your needs.

[CodeConvergence]

@timohubois
Hi Timo,
Thanks for the quick response. Knowing that it is only a styling issue helps.
Maybe, if components are shared as proposed in Sharing Components #377, then a dropdown may become available, as a starter at least, for those who would like to use it.

[purchasingtoolpak]

If you’d like the code with the css for a drop down menu let me know. I used the bulma css to style the menu. Dave From: David ***@***.*** Sent: Monday, May 10, 2021 9:45 AM To: flyntwp/flynt Cc: David Mak; Mention Subject: Re: [flyntwp/flynt] Main Nav Support Drop down (#254) Please excuse me for opening this after almost a year. May I ask @timohubois <https://github.com/timohubois> - is your snippet still relevant for v1.4.? Using your code I am able to bring in the sub menu items, but the styling of the children loop is so off I'm wondering if there was an update. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#254 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFCLIE3GLLJIFWHA3M2FU3TTM7PMJANCNFSM4NQZUYIA> . <https://github.com/notifications/beacon/AFCLIE5WQWBJ4NUEFLNXJ4DTM7PMJA5CNFSM4NQZUYIKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGHPVBLQ.gif>

[CodeConvergence]

Hi Dave,

Thank you! I really like the menu you are using on thearcofhr.org, sharing something like that would (imho) be great for anyone getting started with Flynt. I’m using TailwindCSS, perhaps seeing the way you’ve used Bulma will allow me to do the same with TW or just plain CSS.

May I email you at purchase… ?

[purchasingtoolpak]

Here is the link on github for the drop down navigation menu. https://github.com/purchasingtoolpak/NavigationMain Hope this helps. Dave From: David ***@***.*** Sent: Tuesday, May 11, 2021 4:55 AM To: flyntwp/flynt Cc: David Mak; Mention Subject: Re: [flyntwp/flynt] Main Nav Support Drop down (#254) Hi Dave, Thank you! I really like the menu you are using on thearcofhr.org, sharing something like that would (imho) be great for anyone getting started with Flynt. I’m using TailwindCSS, perhaps seeing the way you’ve used Bulma will allow me to do the same with TW or just plain CSS. May I email you at purchase… ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#254 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFCLIE5FH2MKQOHKAVMJXVDTNDWGBANCNFSM4NQZUYIA> . <https://github.com/notifications/beacon/AFCLIE4EZFIYSSNTAZ3B2LDTNDWGBA5CNFSM4NQZUYIKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGH2G3TQ.gif>

[CodeConvergence]

Thanks so much!

[CodeConvergence]

Quick feedback: Your component works perfectly and implementation was a breeze :)
Bulma’s Sass foundation is a good fit with Flynt, so customization was smooth sailing.

Would you be willing to share your mobile navigation component too?

Thanks again!

[purchasingtoolpak]

OK, I just added the Navigation Burger here. https://github.com/purchasingtoolpak/NavigationBurger Hope this helps. Dave From: David ***@***.*** Sent: Sunday, May 16, 2021 5:30 PM To: flyntwp/flynt Cc: David Mak; Mention Subject: Re: [flyntwp/flynt] Main Nav Support Drop down (#254) Quick feedback: Your component works perfectly and implementation was a breeze :) Bulma’s Sass foundation is a good fit with Flynt, so customization was smooth sailing. Would you be willing to share your mobile navigation component too? Thanks again! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#254 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFCLIE7AVLR2FWSOYXLDRDDTOA2O5ANCNFSM4NQZUYIA> . <https://github.com/notifications/beacon/AFCLIEYBACDXMFBZFUHEZC3TOA2O5A5CNFSM4NQZUYIKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGIXBGEQ.gif>

[CodeConvergence]

Thank you so much Dave!