I'm trying to render menu with Bootstrap 5 but im stuck on make this work, im very noob with Drupal...
Simple links on menu works great, but on dropdown is a problem. I have tried to make a function that change the render if is a drop down menu but wont worked properly
Here is my menu code in html:
<ul class="mb-2 mb-lg-0 me-lg-auto navbar-nav">
<li class="nav-item">
<a class="active nav-link px-lg-3 py-lg-4 text-light" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3 py-lg-4 text-light" href="#">One</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3 py-lg-4 text-light" href="#">Two</a>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle nav-link px-lg-3 py-lg-4 text-light" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Three</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3 py-lg-4 text-light" href="#">Four</a>
</li>
</ul>
<div class="ms-lg-3">
<a class="btn btn-outline-primary pe-3 ps-3" href="#">Log in</a>
<a class="btn btn-primary pe-3 ps-3" href="#" style="background-color: #ee545d;">Register</a>
</div>
template.php
function render_menu_tree($menu_tree) {
print '<ul class="mb-2 mb-lg-0 me-lg-auto navbar-nav">';
foreach ($menu_tree as $link) {
print '<li class="nav-item">';
$link_path = '#';
$link_title = $link['link']['link_title'];
$target = "";
if($link['link']['link_path']) {
$link_path = base_path() . drupal_get_path_alias($link['link']['link_path']);
if($link['link']['link_path'] == '<front>'){
$link_path = "#43";
}
}
// detectar link externo
if( (strpos($link['link']['link_path'], "http://") !== false) ||
(strpos($link['link']['link_path'], "https://") !== false) ) {
$link_path = $link['link']['link_path'];
$target = " target='_blank'";
}
print '<a class="nav-link px-lg-3 py-lg-4 text-light" href="' . $link_path . '"'.$target.'>' . mb_strtoupper($link_title) . '</a>';
if(count($link['below']) > 0) {
render_menu_tree_sub($link['below']);
}
print '</li>';
}
print '</ul>';
}
function render_menu_tree_sub($menu_tree) {
print '<li class="nav-item dropdown">';
foreach ($menu_tree as $link) {
print '<a class="dropdown-item">';
$link_path = '#';
$link_title = $link['link']['link_title'];
$target = "";
if($link['link']['link_path']) {
$link_path = base_path() . drupal_get_path_alias($link['link']['link_path']);
if($link['link']['link_path'] == '<front>'){
$link_path = "#";
}
}
// detectar link externo
if( (strpos($link['link']['link_path'], "http://") !== false) ||
(strpos($link['link']['link_path'], "https://") !== false) ) {
$link_path = $link['link']['link_path'];
$target = " target='_blank'";
}
print '<a class="nav-link px-lg-3 py-lg-4 text-light" href="' . $link_path . '"'.$target.'>' . mb_strtoupper($link_title) . '</a>';
if(count($link['below']) > 0) {
render_menu_tree($link['below']);
}
print '</a>';
}
print '</li>';
}
page.tpl.php
<div class="collapse navbar-collapse" id="navbarNavDropdown-4">
<?php
$main_menu_tree = menu_tree_all_data('main-menu', null, 3);
render_menu_tree($main_menu_tree);
?>
</div>