Doku Designer Top Navigation
Diese Dokumentation beschreibt die Integrierung eines dynamischen Menüs in das eigene Layout auf Basis von Ilch v.2.2 und Bootstrap 5.3 oder neuer.
Hier ein Beispiel für ein Top-Menü auf Grundlagen von Bootstraps "navbar" als responsive Navigation. Die Parameter des Menüs wurden in der Doku Designer Dynamische Menüs behandelt.
Zuerst zum Vergleich die Menüeinstellung im Backend / Adminbereich
<!-- top navigation -->
<nav id="navigation" class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="<?=$this->getUrl() ?>">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ms-auto">
<?=$this->getMenu(
1,
'<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="%s">%s</a>%c
</li>', [
'menus' => [
'ul-class-root' => 'dropdown-menu dropdown-menu-dark',
'ul-class-child' => '',
'li-class-root' => '',
'li-class-child' => '',
'a-class' => 'dropdown-item',
'allow-nesting' => false
],
'boxes' => [
'render' => false
],
]
); ?>
</ul>
</div>
</div>
</nav><!-- /top navigation -->