Menu with div inside on ModX

Question

I tried to make a menu with 'div' inside like here — http://www.stylight.com/ using Wayfinder, but didn't find a way. Were should I look or what should I use to make it happen?

I try to achieve this HTML output:

<div class="navbar-collapse collapse" id="navigation">

      <ul class="nav navbar-nav navbar-left">
   <li class="dropdown yamm-fw">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Men<b class="caret"></b></a>
       <ul class="dropdown-menu">

    <li>
        <div class="yamm-content">
     <div class="row">
         <div class="col-sm-3">
      <img src="img/men.jpg" class="img-responsive hidden-xs" alt="">
         </div>
         <div class="col-sm-3">
      <h3>Clothing</h3>
      <ul>
          <li><a href="category.html">T-shirts</a></li>
          <li><a href="category.html">Shirts</a></li>
          <li><a href="category.html">Pants</a></li>
          <li><a href="category.html">Accessories</a></li>
      </ul>
         </div>
         <div class="col-sm-3">
      <h3>Clothing</h3>
      <ul>
          <li><a href="category.html">T-shirts</a></li>
          <li><a href="category.html">Shirts</a></li>
          <li><a href="category.html">Pants</a></li>
          <li><a href="category.html">Accessories</a></li>
      </ul>
         </div>
         <div class="col-sm-3">
      <h3>Shoes</h3>
      <ul>
          <li><a href="category.html">Trainers</a></li>
          <li><a href="category.html">Sandals</a></li>
          <li><a href="category.html">Hiking shoes</a></li>
          <li><a href="category.html">Casual</a></li>
      </ul>
         </div>
     </div>
        </div>
        <div class="footer clearfix hidden-xs">
     <h4 class="pull-right">Men</h4>
     <div class="buttons pull-left">
         <a href="#" class="btn btn-default"><i class="fa fa-tags"></i> Sales</a>
         <a href="#" class="btn btn-default"><i class="fa fa-star-o"></i> Favourites</a>
         <a href="#" class="btn btn-default"><i class="fa fa-globe"></i> Brands</a>
     </div>
        </div>

    </li>
       </ul>
   </li>
   
   <li class="dropdown yamm-fw open">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Women <b class="caret"></b></a>
       <ul class="dropdown-menu" style="display: block;">

    <li>
        <div class="yamm-content">
     <div class="row">
         <div class="col-sm-3">
      <img src="img/women.jpg" class="img-responsive hidden-xs" alt="">
         </div>
         <div class="col-sm-3">
      <h3>Clothing</h3>
      <ul>
          <li><a href="category.html">T-shirts</a></li>
          <li><a href="category.html">Shirts</a></li>
          <li><a href="category.html">Pants</a></li>
          <li><a href="category.html">Accessories</a></li>
      </ul>
         </div>
         <div class="col-sm-3">
      <h3>Clothing</h3>
      <ul>
          <li><a href="category.html">T-shirts</a></li>
          <li><a href="category.html">Shirts</a></li>
          <li><a href="category.html">Pants</a></li>
          <li><a href="category.html">Accessories</a></li>
      </ul>
         </div>
         <div class="col-sm-3">
      <h3>Shoes</h3>
      <ul>
          <li><a href="category.html">Trainers</a></li>
          <li><a href="category.html">Sandals</a></li>
          <li><a href="category.html">Hiking shoes</a></li>
          <li><a href="category.html">Casual</a></li>
      </ul>
         </div>
     </div>
        </div>
        <div class="footer clearfix hidden-xs">
     <h4 class="pull-right">Women</h4>
     <div class="buttons pull-left">
         <a href="#" class="btn btn-default"><i class="fa fa-tags"></i> Sales</a>
         <a href="#" class="btn btn-default"><i class="fa fa-star-o"></i> Favourites</a>
         <a href="#" class="btn btn-default"><i class="fa fa-globe"></i> Brands</a>
     </div>
        </div>

    </li>
       </ul>
   </li>   
  </div>

Answer 1

It would have been helpful if you posted your code, or at least the HTML output you are hoping to achieve. Here is a link to some Wayfinder introductory examples.

Wayfinder outputs lists and list items. You will use chunk templates to control the output, add classes, add additional HTML tags, etc.

Answer 2

i have a cloud theme site i can give you access to our walk you through it but essentially its 2 [[getResources]] calls

<li class="top-menu-item">
<a href="[[~[[+id]]]]" title="[[+pagetitle]]">[[+menutitle:default=`[[+pagetitle]]`]]</a>

      [[getResources? 
      &parents=`[[+id]]`
      &tpl=`nav-li-row-child-header_[[++theme]]` 
      &sortby=`menuindex` 
      &sortdir=`ASC` 
      &limit=`0` 
      &depth=`0`
      &toPlaceholder=`children`
      ]]
  [[+children:notempty=`<i class="fa fa-chevron-down js-mobile-drop"></i> <div class="child-sections"><div class="row-content">[[+children]]</div></div>`]]

http://modx-beetle.clients.modxcloud.com/