Please help with wayfinder

Support Extras
1

Hello,
can someone please help me to code Wayfinder to setup the ready html code and css?
I do not understand how to assign the classes to the second level ui and li, menu “dropdown” menu.

The full html code is:

				<li class="menu-item-has-children active">
					<a href="index.php?id=1">Home</a>
				</li>

				<li class="">
					<a href="index.php?id=2">Services</a>
					<ul class="dropdown">
						<li class="megamenu-item-info">
							<h5 class="megamenu-item-info-title">Service list</h5>
							<p class="megamenu-item-info-text">Select </p>
						</li>
                        
                        <li class="hover-ver2">
							<a href="/service1"><i class="seoicon-text-paper"></i>
								service 1
							</a>
						</li>
						<li class="hover-ver2">
							<a href="/service2"><i class="seoicon-pin-map"></i>
								Service 2
							</a>
						
					</ul>
				</li>

				
				<li class="has-megamenu menu-item-has-children "><!-- menu divided in 4 column -->
					<a href="index.php?id=3">Labs</a>

					<div class="megamenu" style="background-image: url('[[++assets_url]]themes/main/img/menu-bg.png');">
						<div class="megamenu-row">

							<div class="col3">
								<ul>
									<li class="megamenu-item-info">
										<h5 class="megamenu-item-info-title">Standard Pages</h5>
										<p class="megamenu-item-info-text">Pages that every website needs.</p>
									</li>

									<li>
										<a href="#">Menu1<i class="seoicon-right-arrow"></i></a>
									</li>
									<li>
										<a href="#">Menu2<i class="seoicon-right-arrow"></i></a>
									</li>

									
								</ul>
							</div>
							<div class="col3">
								<ul>
									<li class="megamenu-item-info">
										<h5 class="megamenu-item-info-title">Features</h5>
										<p class="megamenu-item-info-text">Features subtitle</p>
									</li>

									<li>
										<a href="#">Feature1<i class="seoicon-right-arrow"></i></a>
									</li>
									<li>
										<a href="#">Feature2<i class="seoicon-right-arrow"></i></a>
									</li>

								

								</ul>
							</div>
							<div class="col3">
								<ul>

									<li class="megamenu-item-info">
										<h5 class="megamenu-item-info-title">Elements</h5>
										<p class="megamenu-item-info-text">Awesome header </p>
									</li>

									<li>
										<a href="#">Element1<i class="seoicon-right-arrow"></i></a>
									</li>
									<li>
										<a href="#">Element2<i class="seoicon-right-arrow"></i></a>
									</li>
								

								</ul>
							</div>


							<div class="col3"><!--latest column is just a image -->
								<ul>
									<li>
										<div class="google-logo">
											<img src="[[++assets_url]]themes/main/img/logo.png" alt="logo">
										</div>

										<p class="google-text">Comment.
										</p>
									</li>
								</ul>
							</div>

						</div>
					</div>
				</li>
				
				
				<li class="">
					<a href="#">Contact me</a>
				</li>
			</ul>

How should I code Wayfinder to obtain this output?

Thank you very much

2

I’d recommand PdoMenu - > https://docs.modx.pro/en/components/pdotools/snippets/pdomenu.

You can use

Name Description
&firstClass Class for the first menu item. Default: first
&lastClass Class for the last menu item. Default: last
&hereClass Class for the active menu item and its parents. Default: active
&parentClass Class for parent items.
&rowClass Class for each menu row.
&outerClass Class for outer wrapper.
&innerClass Class for inner submenu wrappers.
&levelClass Class for each level of the menu. For example, if you specify «level», it will produce «level1», «level2» etc.
&selfClass Class for the current document in the menu.
&webLinkClass Class for the weblink resources.
1 Like
3

Hello,
thank you very much.

I already partialy solved with this code for wayfinder

 >   [[!Wayfinder? &startId=`0`
> &rowTpl=`rowTpl`
> &outerTpl=`outerTpl`
> &firstClass=`menu-item-has-children`
> &rowClass=`hover-ver2`
> &outerClass=`primary-menu-menu`
> &innerClass=`dropdown`
> &parentClass=``
> ]]
> 
> <!-- outerTpl -->
> <ul [[+wf.classes]]>
> [[+wf.wrapper]]
> </ul>
> <!-- RowTpl-->
> <li[[+wf.id]][[+wf.classes]]><a href="[[+wf.link]]"><i class=[[+classe-active]]></i>[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
1 Like