Node: express using pug syntax to add navigation element

Question

I'm using express to render a template like so using pug

layout.pug

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/css/style.css')
    link(rel='stylesheet', href='/css/bootstrap.css')

    script(type='text/javascript', src='/js/jquery.min.js')
    script(type='text/javascript', src='/js/bootstrap.min.js')
  body
    
    block content

I want to insert a basic navigation at the top of the body, including classes

nav-element

<nav class="navbar navbar-light">
  <a class="navbar-brand" href="#">
    <img src="img/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Wondering if someone could have already done this, the template logic is still pretty new to me.

Answer 1

I finally figured out how to make it work with a dot notation for classes and in brackets you can specify the attributes

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/css/bootstrap.css')
    link(rel='stylesheet', href='/css/style.css')

    script(type='text/javascript', src='/js/jquery.min.js')
    script(type='text/javascript', src='/js/bootstrap.min.js')
  body
    nav.navbar.navbar-light
      a.navbar-brand(href='/')
        img.d-inline-block.align-top(src='/img/bootstrap-solid.svg')
      a.log-out-link.hidden(href='#') Log Out
    block content