A jelenlegi Arculati oldalon található menü  egy WordPress specifikus menü, amely szerkezetileg nem egyezik meg a SZÜF dizájnra épülő oldalakon található megvalósítással, ezért az alábbi linken található teszt html oldalon lévő menü az irányadó.

Teszt html link

<div class="nav list-group" >
    <ul class="list-unstyled" id="accordion" role="navigation" aria-label="főmenü">
        <li><a href="#" class="list-group-item active">Beérkezett<span class="badge">5</span></a>
        </li>
        <li><a href="#" class="list-group-item" title="Elküldött üzenetek">elküldött</a>
        </li>
        <li><a href="#" class="list-group-item" title="Áthelyezés a tartós tárba">tartós tár</a>
        </li>
        <li><a href="#" class="list-group-item" title="meghiúsulási igazolások megtekintése">meghiúsulási igazolások</a>
        </li>
        <li><a href="#" class="list-group-item" title="viszontazonosítás">viszontazonosítás</a>
        </li>
        <li><a href="#" class="list-group-item" title="beállítások">beállítások</a>
        </li>
        <li class="collapseLi"><a href="#collapse02" data-toggle="collapse" class="list-group-item collapsed" data-parent="#accordion" aria-expanded="false">címkék <i class="fas pull-right fa-plus"></i></a>
            <!-- Collaps -->
            <div id="collapse02" class="collapseContent collapse" role="tabpanel" aria-labelledby="headingOne" aria-expanded="false" style="height: 0px;">
                <ul class="list-unstyled tagList">
                    <li><a href="#" class="list-group-item" title="címkék 01">címkék 01</a></li>
                    <li><a href="#" class="list-group-item" title="címkék 02">címkék 02</a></li>
                    <li><a href="#" class="list-group-item" title="címkék 03">címkék 03</a></li>
                    <li><a href="#" class="list-group-item" title="címkék 04">címkék 04</a></li>
                    <li><a href="#" class="list-group-item" title="címkék 05">címkék 05</a></li>
                    <li><a href="#" class="list-group-item" title="címkék 06">címkék 06</a></li>
                    <li><a href="#" class="list-group-item" title="címkék 07">címkék 07</a></li>
                </ul>
            </div>
        </li>
    </ul>
</div>

.sidebar .nav.list-group {
	position: relative;
	border-top: 1px solid #58585a;
	padding-top: 10px;
}
.sidebar .list-group {
	margin: 0;
	padding: 0;
}
.sidebar .list-group-item {
	background: transparent;
	border-color: transparent;
	margin: 0;
	font-size: 0.8rem;
	padding-left: 10px;
	font-weight: 700;
	text-transform: uppercase;
	color: #000;
}
.sidebar a.list-group-item:focus,
.sidebar a.list-group-item:hover,
.sidebar a.list-group-item:active,
.sidebar a.list-group-item.active {
	color: #000;
	text-decoration: none;
	background-color: #f2f2f2;
	font-weight: 700;
	outline: none;
}
.sidebar .collapseLi .list-group-item i {
	text-align: right;
	font-size: 0.8rem;
}
.sidebar .collapseLi.active {
	background-color: #f2f2f2;
}

//COLLAPSE
$j('.collapseContent').on('shown.bs.collapse', function () {
  var thisItem = $j(this);
  if (thisItem.is('.in')) {
    $j('.collapseLi').removeClass('active');
    thisItem.parent('.collapseLi').addClass('active');
    $j('.collapseContent').removeClass('in');
    $j('.collapseContent').prev('a').children('i').removeClass('fa-minus').addClass('fa-plus');
    $j(this).addClass('in');
    $j(this).prev('a').children('i').removeClass('fa-plus').addClass('fa-minus');
  }
})

$j('.collapseContent').on('hidden.bs.collapse', function () {
  var thisItem = $j(this);
  $j('.collapseLi').removeClass('active');
  thisItem.removeClass('in');
  thisItem.prev('a').children('i').addClass('fa-plus').removeClass('fa-minus');
})