Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: dropdown fails W3C validation

Chris Sweeney premium asked 4 years ago


I'm trying to get my pages to pass W3C validation, but the navbar fails at

<li class="nav-item dropdown">
    <a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu dropdown-primary" 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>

The W3C Error message is:Error: Element a is missing one or more of the following attributes: href, role. referring to the following line:

<a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">Dropdown</a>

How may I fix this?

CheersChris


Chris Sweeney premium answered 4 years ago


I've fixed this with the following:

<a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown"
  aria-haspopup="true" aria-expanded="false">Dropdown</a>

and it now passes validation.


Piotr Urbaniak free commented 4 years ago

Hello Chris, I'm glad You found a solution to your problem. If You have any other questions in the future, feel free to write to us. Best regards


Chris Sweeney premium commented 4 years ago

Hi Peter

You may want to update the examples (your code in my original post) to include the use of href="#"

Cheers Chris


Piotr Urbaniak free commented 4 years ago

Hello Chris, I updated Your post Cheers



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.18.0
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No