Add Main Menu collapsible dropdown override with Bootstrap 5 responsive navbar

Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>

src/templates/html/mod_menu/default.php

@@ -0,0 +1,104 @@
+<?php
+/**
+ * @package     Joomla.Site
+ * @subpackage  mod_menu
+ *
+ * @copyright   (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ *
+ * Main Menu - Mobile responsive collapsible dropdown menu override
+ * Bootstrap 5 responsive navbar with hamburger menu
+ */
+
+defined('_JEXEC') or die;
+
+use Joomla\CMS\Helper\ModuleHelper;
+
+$id = '';
+
+if ($tagId = $params->get('tag_id', '')) {
+    $id = ' id="' . $tagId . '"';
+}
+
+// Get module class suffix
+$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx', ''), ENT_COMPAT, 'UTF-8');
+
+// The menu class is deprecated. Use mod-menu instead
+?>
+<nav class="mod-menu mod-menu-main navbar navbar-expand-lg<?php echo $moduleclass_sfx; ?>"<?php echo $id; ?>>
+    <div class="container-fluid">
+        <!-- Hamburger toggle button for mobile -->
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainMenuCollapse" aria-controls="mainMenuCollapse" aria-expanded="false" aria-label="Toggle Main Menu">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <!-- Collapsible menu content -->
+        <div class="collapse navbar-collapse" id="mainMenuCollapse">
+            <ul class="navbar-nav mod-menu-main__list">
+<?php foreach ($list as $i => &$item) :
+    $itemParams = $item->getParams();
+    $class = 'nav-item mod-menu-main__item item-' . $item->id;
+
+    if ($item->id == $default_id) {
+        $class .= ' default';
+    }
+
+    if ($item->id == $active_id || ($item->type === 'alias' && $itemParams->get('aliasoptions') == $active_id)) {
+        $class .= ' current';
+    }
+
+    if (in_array($item->id, $path)) {
+        $class .= ' active';
+    } elseif ($item->type === 'alias') {
+        $aliasToId = $itemParams->get('aliasoptions');
+
+        if (count($path) > 0 && $aliasToId == $path[count($path) - 1]) {
+            $class .= ' active';
+        } elseif (in_array($aliasToId, $path)) {
+            $class .= ' alias-parent-active';
+        }
+    }
+
+    if ($item->type === 'separator') {
+        $class .= ' divider';
+    }
+
+    if ($item->deeper) {
+        $class .= ' deeper dropdown';
+    }
+
+    if ($item->parent) {
+        $class .= ' parent';
+    }
+
+    echo '<li class="' . $class . '">';
+
+    switch ($item->type) :
+        case 'separator':
+        case 'component':
+        case 'heading':
+        case 'url':
+            require ModuleHelper::getLayoutPath('mod_menu', 'default_' . $item->type);
+            break;
+
+        default:
+            require ModuleHelper::getLayoutPath('mod_menu', 'default_url');
+            break;
+    endswitch;
+
+    // The next item is deeper.
+    if ($item->deeper) {
+        echo '<ul class="dropdown-menu mod-menu-main__dropdown">';
+    } elseif ($item->shallower) {
+        // The next item is shallower.
+        echo '</li>';
+        echo str_repeat('</ul></li>', $item->level_diff);
+    } else {
+        // The next item is on the same level.
+        echo '</li>';
+    }
+endforeach;
+?></ul>
+        </div>
+    </div>
+</nav>

src/templates/html/mod_menu/default_component.php

@@ -0,0 +1,64 @@
+<?php
+/**
+ * @package     Joomla.Site
+ * @subpackage  mod_menu
+ *
+ * @copyright   (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ *
+ * Main Menu - Component item layout
+ */
+
+defined('_JEXEC') or die;
+
+use Joomla\CMS\Filter\OutputFilter;
+use Joomla\CMS\HTML\HTMLHelper;
+
+$attributes = [];
+
+if ($item->anchor_title) {
+    $attributes['title'] = $item->anchor_title;
+}
+
+if ($item->anchor_css) {
+    $attributes['class'] = $item->anchor_css;
+}
+
+if ($item->anchor_rel) {
+    $attributes['rel'] = $item->anchor_rel;
+}
+
+$linktype = $item->title;
+
+if ($item->menu_icon) {
+    // The link is an icon
+    if ($itemParams->get('menu_text', 1)) {
+        // If the link text is to be displayed, the icon is added with aria-hidden
+        $linktype = '<span class="p-2 ' . $item->menu_icon . '" aria-hidden="true"></span>' . $item->title;
+    } else {
+        // If the icon itself is the link, it needs a visually hidden text
+        $linktype = '<span class="p-2 ' . $item->menu_icon . '" aria-hidden="true"></span><span class="visually-hidden">' . $item->title . '</span>';
+    }
+}
+
+if ($item->browserNav == 1) {
+    $attributes['target'] = '_blank';
+    $attributes['rel'] = 'noopener noreferrer';
+} elseif ($item->browserNav == 2) {
+    $options = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,' . $params->get('window_open');
+
+    $attributes['onclick'] = "window.open(this.href, 'targetWindow', '" . $options . "'); return false;";
+}
+
+// Add dropdown toggle for items with children
+$linkClass = 'nav-link mod-menu-main__link';
+if ($item->deeper) {
+    $linkClass .= ' dropdown-toggle';
+    $attributes['data-bs-toggle'] = 'dropdown';
+    $attributes['role'] = 'button';
+    $attributes['aria-expanded'] = 'false';
+}
+
+$attributes['class'] = $linkClass;
+
+echo HTMLHelper::_('link', OutputFilter::ampReplace(htmlspecialchars($item->flink, ENT_COMPAT, 'UTF-8', false)), $linktype, $attributes);

src/templates/html/mod_menu/default_heading.php

@@ -0,0 +1,37 @@
+<?php
+/**
+ * @package     Joomla.Site
+ * @subpackage  mod_menu
+ *
+ * @copyright   (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ *
+ * Main Menu - Heading item layout
+ */
+
+defined('_JEXEC') or die;
+
+$title = $item->anchor_title ? ' title="' . $item->anchor_title . '"' : '';
+$anchor_css = $item->anchor_css ?: '';
+
+$linktype = $item->title;
+
+if ($item->menu_icon) {
+    // The link is an icon
+    if ($itemParams->get('menu_text', 1)) {
+        // If the link text is to be displayed, the icon is added with aria-hidden
+        $linktype = '<span class="p-2 ' . $item->menu_icon . '" aria-hidden="true"></span>' . $item->title;
+    } else {
+        // If the icon itself is the link, it needs a visually hidden text
+        $linktype = '<span class="p-2 ' . $item->menu_icon . '" aria-hidden="true"></span><span class="visually-hidden">' . $item->title . '</span>';
+    }
+}
+
+// Add dropdown toggle for items with children
+$headingClass = 'nav-link mod-menu-main__heading';
+if ($item->deeper) {
+    $headingClass .= ' dropdown-toggle';
+}
+
+?>
+<span class="<?php echo $headingClass . ' ' . $anchor_css; ?>"<?php echo $title; ?>><?php echo $linktype; ?></span>

src/templates/html/mod_menu/default_separator.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * @package     Joomla.Site
+ * @subpackage  mod_menu
+ *
+ * @copyright   (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ *
+ * Main Menu - Separator item layout
+ */
+
+defined('_JEXEC') or die;
+
+$title      = $item->anchor_title ? ' title="' . $item->anchor_title . '"' : '';
+$anchor_css = $item->anchor_css ?: '';
+
+$linktype = $item->title;
+
+if ($item->menu_icon) {
+    // The link is an icon
+    if ($itemParams->get('menu_text', 1)) {
+        // If the link text is to be displayed, the icon is added with aria-hidden
+        $linktype = '<span class="p-2 ' . $item->menu_icon . '" aria-hidden="true"></span>' . $item->title;
+    } else {
+        // If the icon itself is the link, it needs a visually hidden text
+        $linktype = '<span class="p-2 ' . $item->menu_icon . '" aria-hidden="true"></span><span class="visually-hidden">' . $item->title . '</span>';
+    }
+}
+
+?>
+<span class="dropdown-divider mod-menu-main__separator <?php echo $anchor_css; ?>"<?php echo $title; ?>><?php echo $linktype; ?></span>

src/templates/html/mod_menu/default_url.php

@@ -0,0 +1,69 @@
+<?php
+/**
+ * @package     Joomla.Site
+ * @subpackage  mod_menu
+ *
+ * @copyright   (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ *
+ * Main Menu - URL item layout
+ */
+
+defined('_JEXEC') or die;
+
+use Joomla\CMS\Filter\OutputFilter;
+use Joomla\CMS\HTML\HTMLHelper;
+
+$attributes = [];
+
+if ($item->anchor_title) {
+    $attributes['title'] = $item->anchor_title;
+}
+
+if ($item->anchor_css) {
+    $attributes['class'] = $item->anchor_css;
+}
+
+if ($item->anchor_rel) {
+    $attributes['rel'] = $item->anchor_rel;
+}
+
+$linktype = $item->title;
+
+if ($item->menu_icon) {
+    // The link is an icon
+    if ($itemParams->get('menu_text', 1)) {
+        // If the link text is to be displayed, the icon is added with aria-hidden
+        $linktype = '<span class="p-2 ' . $item->menu_icon . '" aria-hidden="true"></span>' . $item->title;
+    } else {
+        // If the icon itself is the link, it needs a visually hidden text
+        $linktype = '<span class="p-2 ' . $item->menu_icon . '" aria-hidden="true"></span><span class="visually-hidden">' . $item->title . '</span>';
+    }
+}
+
+if ($item->browserNav == 1) {
+    $attributes['target'] = '_blank';
+    $attributes['rel'] = 'noopener noreferrer';
+} elseif ($item->browserNav == 2) {
+    $options = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,' . $params->get('window_open');
+
+    $attributes['onclick'] = "window.open(this.href, 'targetWindow', '" . $options . "'); return false;";
+}
+
+// Add dropdown toggle for items with children
+$linkClass = 'nav-link mod-menu-main__link';
+if ($item->deeper) {
+    $linkClass .= ' dropdown-toggle';
+    $attributes['data-bs-toggle'] = 'dropdown';
+    $attributes['role'] = 'button';
+    $attributes['aria-expanded'] = 'false';
+}
+
+// Merge existing class with our class
+if (isset($attributes['class'])) {
+    $attributes['class'] .= ' ' . $linkClass;
+} else {
+    $attributes['class'] = $linkClass;
+}
+
+echo HTMLHelper::_('link', OutputFilter::ampReplace(htmlspecialchars($item->flink, ENT_COMPAT, 'UTF-8', false)), $linktype, $attributes);

src/templates/html/mod_menu/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title></title>
+</head>
+<body>
+</body>
+</html>

src/templates/templateDetails.xml

@@ -36,7 +36,7 @@
 	  </server>
 	</updateservers>
 	<name>MokoCassiopeia</name>
-	<version>03.08.02</version>
+	<version>03.08.03</version>
 	<creationDate>2026-02-27</creationDate>
 	<author>Jonathan Miller || Moko Consulting</author>
 	<authorEmail>hello@mokoconsulting.tech</authorEmail>