Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Comments between Nav menu <li> elements break the nav dropdowns

See original GitHub issue

I’m trying to use CoreUI (free) with .NET Blazor, Blazor inserts comments between every element to help with rendering and I believe this is breaking the nav bar on CoreUI, specifically the drop down doesnt work. I have a JSBin example at the bottom of this post.

On nav item click it gets all sibling elements and tries to get the classList of them without checking they are a valid element, hence throws an exception when trying to access classlist.contains on a comment. Just to test I edited the JS in dev tools toggleDropDown() method to exclude comments (added extra condition to if: && t.nodeName != ‘#comment’) and it seemed to fix it, until i refreshed of course. from

` if (Default$9.dropdownAccordion === true) {

    this._getAllSiblings(toggler.parentElement).forEach(function (element) {

      if (element !== toggler.parentNode) {

        if (element.classList.contains(CLASS_NAME_NAV_DROPDOWN)) {


` to

`if (Default$9.dropdownAccordion === true) {

    this._getAllSiblings(toggler.parentElement).forEach(function (element) {

      if (element !== toggler.parentNode && element.nodeName != '#comment') {

        if (element.classList.contains(CLASS_NAME_NAV_DROPDOWN)) {


Any assistance with this is much appreciated, happy to raise a pull request if I can get some guidance on this.

Details: Using Windows 10 Tested on Chrome 84.0 and Firefox 79.0

JSBin Example:,output

Old Codepen example(this example works but if you inspect can see that Codepen has removed the commnents): Screenshot of debugging image

Reproduce Steps: Create new Blazor project in visual studio Add CoreUI Packages Update layout to use CoreUI Click any nav bar dropdown item

Many Thanks,


Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

mrholekcommented, Aug 18, 2020

One more try

    _proto._getAllSiblings = function _getAllSiblings(element, filter) {
      var siblings = [];
      element = element.parentNode.firstChild;

      do {
        if (element.nodeType === 3) {
          continue; // text node

        if (element.nodeType === 8) {
          continue; // comment node

        if (!filter || filter(element)) {
        } // eslint-disable-next-line no-cond-assign

      } while (element = element.nextSibling);

      return siblings;
aquarienscommented, Nov 21, 2020

This seems to work now thanks a lot! Will this be change be applied to the main branch?

Hi, Is it possible for you to share a minimal blazor project with dropdown working? I tried the workaround but doesn’t seems to be working. I am using CoreUI free with blazor server app.


Read more comments on GitHub >

github_iconTop Results From Across the Web

Break out of li-Element in a dropdown navigation
1 Answer 1 ... use position:absolute on your sub-menu's. ... Let me know if you need more assistance. Use the exact same method...
Read more >
How To Create a Dropdown Navigation Bar - W3Schools
Create a dropdown menu that appears when the user moves the mouse over an element inside a navigation bar. Step 1) Add HTML:...
Read more >
Learn about the Nav Menu Widget (Pro) - Elementor
The Nav Menu widget lets you use menus that you've created in WordPress and ... between menu items; Style: From the dropdown menu...
Read more >
Split navigation - CSS: Cascading Style Sheets | MDN
A navigation pattern where one or more elements are separated from the rest of the navigation items. Items separated into two groups.
Read more >
Dropdowns · Bootstrap v5.2
Wrap the dropdown's toggle (your button or link) and the dropdown menu within .dropdown , or another element that declares position: relative; ....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found