1

I am trying to make a Joomla menu more accessible. I am using Bootstrap 3 and letting Joomla generate the menu and dropdowns but I need to add ' data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" ' to the top level href among some other aria elements (See example below). However cannot figure out how to use the template overrides to input the information I need. I would prefer not to have to code the menu manually but I will if I have too.

<ul class="nav  navbar-nav" >
   <li class="dropdown">
      <a href="#" 
         id="toplevelitem" 
         class="dropdown-toggle" 
         data-toggle="dropdown" 
         role="button" 
         aria-haspopup="true" 
         aria-expanded="false"
      >
       Top Level Item
       <span class="caret"></span></a>
       <ul class="dropdown-menu" role="menu" aria-labelledby="toplevelitem">
          <li role="presentation"><a role="menuitem" href="#">Item 1</a></li>
          <li role="presentation"><a role="menuitem" href="#">Item 2</a></li>
          <li role="presentation"><a role="menuitem" href="#">Item 3</a></li>
       </ul>
   </li>
</ul>
4
  • Link to site and more info about the template in question would be nice.
    – Mikan
    Nov 8, 2016 at 10:55
  • @Mikan I didn't include a link to the site because its not needed, it is a basic question of how to inset additional information into the Joomla href at run-time via the template overrides. Nov 9, 2016 at 14:37
  • OK, if you say so...
    – Mikan
    Nov 9, 2016 at 14:56
  • Which Version of Joomla was this? 3 or 4?
    – Michael71
    Apr 7, 2023 at 19:30

1 Answer 1

0

Copy these files

  • ../modules/mod_menu/tmpl/default.php
  • ../modules/mod_menu/tmpl/default_url.php

to folder

  • ../templates/your_template_name/html/mod_menu/

Edit the file ../templates/your_template_name/html/mod_menu/default.php and change this code below (arround lines 62) :

if ($item->deeper)
    {
        $class .= ' deeper';
    }

    if ($item->parent)
    {
        $class .= ' parent';
    }

to

if ($item->deeper)
    {
        $class .= ' dropdown';
    }

    if ($item->parent)
    {
        $class .= ' parent';
    }
    if (($item->level == 2) && ($item->parent)) {
        $class .= ' dropdown-submenu';
    }
    if (!empty($class))
    {
        $class = ' class="' . trim($class) . '"';
    }

and at line 86

if ($item->deeper)
    {
        echo '<ul class="nav-child unstyled small">';
    }

to

if ($item->deeper)
    {
        echo '<ul class="dropdown-menu">';
    }

then open file ../templates/your_template_name/html/mod_menu/default_url.php and add this code

if ($item->parent)
{
    $attributes['class'] = 'dropdown-toggle';
    $attributes['data-toggle'] = 'dropdown';
    $attributes['role'] = 'button';
    $attributes['aria-haspopup'] = 'true';
    $attributes['aria-expanded'] = 'false';
    $linktype = $item->title . '<span class="caret"></span>';

}

I haven't tested it yet, but you should get the idea for further modifications, if needed.

1
  • I am marking this a accetped, however I did make a few adjustments to get the final product: I used: if ($item->level == 2) vs if (($item->level == 2) && ($item->parent)) The line 86 I added the item id: echo '<ul class="dropdown-menu" role="menu" aria-labelledby="'.$itemId.'">'; The rest was spot on! I also added the Paypal Bootstrap Accessibility Plugin and it works like a charm! paypal.github.io/bootstrap-accessibility-plugin Nov 17, 2016 at 11:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.