Search code examples
puggetuikit

PUG to HTMl with UIKIT v3

I am using PUG in my templates and the UIKIT V3 framework (getuikit.com) My problem is when I do a dropdown item in my navbar: The best explanation is with this 2 code pens, that show what is happening The first one is with pug: https://codepen.io/prtome/pen/wYoMpq

nav.uk-navbar-container.uk-dark(data-uk-navbar data-uk-sticky)
  .uk-navbar-left
    ul.uk-navbar-nav.no-print
      li
         a(href="/" class="nur-icon-button" data-uk-icon="icon: home; ratio: 1.5")
      li
        a(href="") HERE
          .uk-navbar-dropdown
             ul.uk-nav.uk-navbar-dropdown-nav
               li.uk-active
                 a(href="") ALPHA
               li
                 a(href="") BETA

The resulting HTML code is

  <nav class="uk-navbar-container uk-dark uk-navbar uk-sticky uk-sticky-fixed" data-uk-navbar="data-uk-navbar" data-uk-sticky="data-uk-sticky" style="position: fixed; top: 0px; width: 1379px;">
    <div class="uk-navbar-left">
      <ul class="uk-navbar-nav no-print">
        <li><a class="nur-icon-button uk-icon" href="/" data-uk-icon="icon: home; ratio: 1.5"><svg...></svg></a></li>
        <li><a href="" class="uk-open" aria-expanded="true">HERE</a>
          <div class="uk-navbar-dropdown uk-open uk-navbar-dropdown-bottom-left" style="left: 60px; top: 80px;">
            <a href=""></a>
            <ul class="uk-nav uk-navbar-dropdown-nav">
               <a href=""></a>
              <li class="uk-active"><a href=""></a><a href="">ALPHA</a></li>
             <li><a href="">BETA</a></li>
            </ul>
         </div></li>
      </ul>
   </div>
 </nav>

As you can see there are multiple <a href=""> that I think have nothing to do there. This adds empty lines in the menu - most annoying ;)

the second one is the code directly in HTML https://codepen.io/prtome/pen/oaYjOV without the additional <a href="> , and it is rendered without adding them.

Here is the desired HTML output:

<nav class="uk-navbar-container" uk-navbar>

    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#" class="nur-icon-button" data-uk-icon="icon: home; ratio: 1.5"></a></li>
            <li>
                <a href="#">HERE</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">ALPHA</a></li>
                        <li><a href="#">BETA</a></li>
                    </ul>
                </div>
            </li>
        </ul>

    </div>

</nav>

I suppose there is an error in my pug code that is making it add all these href ? But I cannot find it - help appreciated - thanks

Solution

  • I believe that this is what you want (based on your second codepen). Note that the a(href='#') HERE is in line with the dropdown underneath it, not nested. I pasted this pug into your first codepen and it gave the desired result.

    nav.uk-navbar-container(uk-navbar='')
  .uk-navbar-left
    ul.uk-navbar-nav
      li.uk-active
        a.nur-icon-button(href='#' data-uk-icon='icon: home; ratio: 1.5')
      li
        a(href='#') HERE
        .uk-navbar-dropdown
          ul.uk-nav.uk-navbar-dropdown-nav
            li.uk-active
              a(href='#') ALPHA
            li
              a(href='#') BETA