Мега меню pdoMenu

Александр здравствуйте.

Нуждаюсь в вашей помощи.

Скажите пжл как собрать мега меню на modx revo?

Я понимаю как указать обычное меню с выпадающим списком. Но затруднения вызывает именно дополнительные пункты меню, в которых используются столбы от того же bootstrap.

<nav id="primary-menu" class="sub-title">

<ul class="sf-js-enabled my-cl" style="touch-action: auto;">
	<li class="sub-menu"><a href="/" class="sf-with-ul"><div>1</div><span>первый пунтк</span></a>
		<ul>
			<li class="sub-menu"><a href="/" class="sf-with-ul"><div>1.1</div></a></li>
			<li class="sub-menu"><a href="/" class="sf-with-ul"><div>1.2</div></a></li>
			<li class="sub-menu"><a href="/" class="sf-with-ul"><div>1.3</div></a></li>
			<li class="sub-menu"><a href="/" class="sf-with-ul"><div>1.4</div></a></li>
		</ul>
	</li>
	<li class="current sub-menu" ><a href="/" class="sf-with-ul"><div>2</div><span>второй пункт</span></a>
		<ul>
			<li class="sub-menu"><a href="/" class="sf-with-ul"><div><i class="icon-stack"></i>2.1</div></a></li>
			<li class="sub-menu"><a href="/" class="sf-with-ul"><div><i class="icon-gift"></i>2.2</div></a></li>
		</ul>
	</li>
	<li class="mega-menu sub-menu"><a href="/" class="sf-with-ul"><div>3</div><span>третий пункт (мега)</span></a>
		<div class="mega-menu-content style-2 clearfix">
			<ul class="mega-menu-column col-md-3">
				<li class="mega-menu-title sub-menu"><a href="/" class="sf-with-ul"><div>3.1</div></a>
					<ul>
						<li><a href="/"><div>3.1.1</div></a></li>
						<li><a href="/"><div>3.1.2</div></a></li>
					</ul>
				</li>
			</ul>
			<ul class="mega-menu-column col-md-3">
				<li class="mega-menu-title sub-menu"><a href="/" class="sf-with-ul"><div>3.2</div></a>
					<ul>
						<li><a href="/"><div>3.2.1</div></a></li>
						<li><a href="/"><div>3.2.2</div></a></li>
					</ul>
				</li>
			</ul>
			<ul class="mega-menu-column col-md-3">
				<li class="mega-menu-title sub-menu"><a href="/" class="sf-with-ul"><div>3.3</div></a>
					<ul>
						<li><a href="/"><div>3.3.1</div></a></li>
						<li><a href="/"><div>3.3.2</div></a></li>
					</ul>
				</li>
			</ul>
			<ul class="mega-menu-column col-md-3">
				<li class="mega-menu-title sub-menu"><a href="/" class="sf-with-ul"><div>3.4</div></a>
					<ul>
						<li><a href="/"><div>3.4.1</div></a></li>
						<li><a href="/"><div>3.4.2</div></a></li>
					</ul>
				</li>
			</ul>
		</div>
	</li>
	<li class="current sub-menu"><a href="#" class="sf-with-ul"><div>4</div><span>четвертый</span></a></li>
</ul>

<div id="top-search">
	<a href="#" id="top-search-trigger"><i class="icon-search3"></i><i class="icon-line-cross"></i></a>
	<form action="search.html" method="get">
		<input name="q" class="form-control" value="" placeholder="tip / enter" type="text">
	</form>
</div>

</nav>

Вот я понимаю что все оборачиваем в &tplOuter, обычный пункт (без дочек) в &tpl, пункт с потомками в &tplParentRow, обертка внутренних пунктов &tplInner и собственно сами внутренние пункты &tplInnerRow.

Вот у нас и получилось обычное меню с выпадающим списком. Но что делать с мега меню? Просто не понятно как вывести некоторые группы ресурсов в мега меню с помощью компонента pdoMenu. И что бы так же все соблюдалось. Т.е. какие пункты без потомков, какие то с потомками (но без мега), как какие то пункты используют мега меню.

Спасибо.