The accordion menu turns an unordered list into a collapsing and expanding accordion or panel menu. 

Use the following classes to render an accordion or panel menu for any unordered list or Joomla menu module.

  • zen-nav
  • zen-nav-stacked
  • zen-accordion 
  • zen-lines

Optional

  • zen-accordion-panel 

 

Accordion Menu Example

Code example

<ul class="zen-nav zen-nav-stacked zen-accordion zen-lines">
	<li class="parent"><span class="zen-menu-heading">Mipsum dolor what</span>
		<ul>
			<li><a href="#">Class aptent taciti sociosqu</a></li>
			<li><a href="#">Integer porttitor</a></li>
			<li><a href="#">Duis volutpat nunc</a></li>
			<li><a href="#">Praesent id diam</a></li>
		</ul>
	</li>
	<li class="parent"><span class="zen-menu-heading">Praesent id diam</span>
		<ul>
			<li><a href="#">Class aptent taciti sociosqu</a></li>
			<li><a href="#">Integer porttitor</a></li>
			<li><a href="#">Duis volutpat nunc</a></li>
			<li><a href="#">Praesent id diam</a></li>
		</ul>
	</li>
	<li class="parent"><span class="zen-menu-heading">Integer porttitor</span>
		<ul>
			<li><a href="#">Class aptent taciti sociosqu</a></li>
			<li><a href="#">Integer porttitor</a></li>
			<li><a href="#">Duis volutpat nunc</a></li>
			<li><a href="#">Praesent id diam</a></li>
		</ul>
	</li>
	<li class="parent"><span class="zen-menu-heading">Class aptent taciti sociosqu</span>
		<ul>
			<li><a href="#">Class aptent taciti sociosqu</a></li>
			<li><a href="#">Integer porttitor</a></li>
			<li><a href="#">Duis volutpat nunc</a></li>
			<li><a href="#">Praesent id diam</a></li>
		</ul>
	</li>
	<li class="parent"><span class="zen-menu-heading">Integer porttitor</span>
		<ul>
			<li><a href="#">Class aptent taciti sociosqu</a></li>
			<li><a href="#">Integer porttitor</a></li>
			<li><a href="#">Duis volutpat nunc</a></li>
			<li><a href="#">Praesent id diam</a></li>
		</ul>
	</li>
</ul>

 

Panel Menu Example

The panel menu allows the user to open any of the accordion panels without closing items that are already open.

Code example

<ul class="zen-nav zen-nav-stacked zen-accordion zen-lines zen-accordion-panel">
	<li class="parent"><span class="zen-menu-heading">Mipsum dolor what</span>
		<ul>
			<li><a href="#">Class aptent taciti sociosqu</a></li>
			<li><a href="#">Integer porttitor</a></li>
			<li><a href="#">Duis volutpat nunc</a></li>
			<li><a href="#">Praesent id diam</a></li>
		</ul>
	</li>
	<li class="parent"><span class="zen-menu-heading">Praesent id diam</span>
		<ul>
			<li><a href="#">Class aptent taciti sociosqu</a></li>
			<li><a href="#">Integer porttitor</a></li>
			<li><a href="#">Duis volutpat nunc</a></li>
			<li><a href="#">Praesent id diam</a></li>
		</ul>
	</li>
	<li class="parent"><span class="zen-menu-heading">Integer porttitor</span>
		<ul>
			<li><a href="#">Class aptent taciti sociosqu</a></li>
			<li><a href="#">Integer porttitor</a></li>
			<li><a href="#">Duis volutpat nunc</a></li>
			<li><a href="#">Praesent id diam</a></li>
		</ul>
	</li>
	<li class="parent"><span class="zen-menu-heading">Class aptent taciti sociosqu</span>
		<ul>
			<li><a href="#">Class aptent taciti sociosqu</a></li>
			<li><a href="#">Integer porttitor</a></li>
			<li><a href="#">Duis volutpat nunc</a></li>
			<li><a href="#">Praesent id diam</a></li>
		</ul>
	</li>
	<li class="parent"><span class="zen-menu-heading">Integer porttitor</span>
		<ul>
			<li><a href="#">Class aptent taciti sociosqu</a></li>
			<li><a href="#">Integer porttitor</a></li>
			<li><a href="#">Duis volutpat nunc</a></li>
			<li><a href="#">Praesent id diam</a></li>
		</ul>
	</li>
</ul>