Attributes

Tag attributes look similar to HTML (with optional commas), but their values are just regular JavaScript.

(NOTE: Examples on this page use the pipe character (|) for whitespace control.)

  1. a(href='google.com') Google
  2. |
  3. |
  4. a(class='button' href='google.com') Google
  5. |
  6. |
  7. a(class='button', href='google.com') Google
  1. <a href="google.com">Google</a>
  2. <a class="button" href="google.com">Google</a>
  3. <a class="button" href="google.com">Google</a>

Normal JavaScript expressions work fine, too:

  1. - var authenticated = true
  2. body(class=authenticated ? 'authed' : 'anon')
  1. <body class="authed"></body>

Multiline Attributes

If you have many attributes, you can also spread them across many lines:

  1. input(
  2.   type='checkbox'
  3.   name='agreement'
  4.   checked
  5. )
  1. <input type="checkbox" name="agreement" checked="checked" />

If your JavaScript runtime supports ES2015 template strings (including Node.js/io.js 1.0.0 and later), you can use that syntax for attributes. This is really useful for attributes with really long values:

  1. input(data-json=`
  2.   {
  3.     "very-long": "piece of ",
  4.     "data": true
  5.   }
  6. `)
  1. <input data-json="
  2.   {
  3.     &quot;very-long&quot;: &quot;piece of &quot;,
  4.     &quot;data&quot;: true
  5.   }
  6. " />

Quoted Attributes

If your attribute name contains odd characters that might interfere with JavaScript syntax, either quote it using "" or '', or use commas to separate different attributes. Examples of such characters include [] and () (frequently used in Angular 2).

  1. //- In this case, `(click)` is treated as a
  2. //- function call instead of a attribute name,
  3. //- resulting in the unusual error.
  4. div(class='div-class' (click)='play()')
  1. index.pug:4:11
  2.     2| //- function call instead of a attribute name,
  3.     3| //- resulting in the unusual error.
  4.   > 4| div(class='div-class' (click)='play()')
  5. -----------------^
  7. Syntax Error: Assigning to rvalue
  1. div(class='div-class', (click)='play()')
  2. div(class='div-class' '(click)'='play()')
  1. <div class="div-class" (click)="play()"></div>
  2. <div class="div-class" (click)="play()"></div>

Attribute Interpolation

Caution

Previous versions of Pug/Jade supported an interpolation syntax such as:

  1. a(href="/#{url}") Link

This syntax is no longer supported. Alternatives are found below. (Check our migration guide for more information on other incompatibilities between Pug v2 and previous versions.)

Here are some alternatives you can use to include variables in your attribute:

  • Simply write the attribute in JavaScript:
  1. - var url = 'pug-test.html';
  2. a(href='/' + url) Link
  3. |
  4. |
  5. - url = 'https://example.com/'
  6. a(href=url) Another link
  1. <a href="/pug-test.html">Link</a>
  2. <a href="https://example.com/">Another link</a>
  • If your JavaScript runtime supports ES2015 template strings (including Node.js/io.js 1.0.0 and later), you can also use its syntax to simplify your attributes:
  1. - var btnType = 'info'
  2. - var btnSize = 'lg'
  3. button(type='button' class='btn btn-' + btnType + ' btn-' + btnSize)
  4. |
  5. |
  6. button(type='button' class=`btn btn-${btnType} btn-${btnSize}`)
  1. <button class="btn btn-info btn-lg" type="button"></button>
  2. <button class="btn btn-info btn-lg" type="button"></button>

Unescaped Attributes

By default, all attributes are escaped—that is,special characters are replaced with escape sequences—to prevent attacks (such as cross site scripting). If you need to use special characters, use != instead of =.

  1. div(escaped="<code>")
  2. div(unescaped!="<code>")
  1. <div escaped="&lt;code&gt;"></div>
  2. <div unescaped="<code>"></div>
Caution

Unescaped buffered code can be dangerous. You must be sure to sanitize any user inputs to avoid cross-site scripting.

Boolean Attributes

Boolean attributes are mirrored by Pug. Boolean values (true and false) are accepted. When no value is specified true is assumed.

  1. input(type='checkbox' checked)
  2. |
  3. |
  4. input(type='checkbox' checked=true)
  5. |
  6. |
  7. input(type='checkbox' checked=false)
  8. |
  9. |
  10. input(type='checkbox' checked=true.toString())
  1. <input type="checkbox" checked="checked" />
  2. <input type="checkbox" checked="checked" />
  3. <input type="checkbox" />
  4. <input type="checkbox" checked="true" />

If the doctype is html, Pug knows not to mirror the attribute, and instead uses the terse style (understood by all browsers).

  1. doctype html
  2. |
  3. |
  4. input(type='checkbox' checked)
  5. |
  6. |
  7. input(type='checkbox' checked=true)
  8. |
  9. |
  10. input(type='checkbox' checked=false)
  11. |
  12. |
  13. input(type='checkbox' checked=true && 'checked')
  1. <!DOCTYPE html>
  2. <input type="checkbox" checked>
  3. <input type="checkbox" checked>
  4. <input type="checkbox">
  5. <input type="checkbox" checked="checked">

Style Attributes

The style attribute can be a string, like any normal attribute; but it can also be an object, which is handy when styles are generated by JavaScript.

  1. a(style={color: 'red', background: 'green'})
  1. <a style="color:red;background:green;"></a>

Class Attributes

The class attribute can be a string, like any normal attribute; but it can also be an array of class names, which is handy when generated from JavaScript.

  1. - var classes = ['foo', 'bar', 'baz']
  2. a(class=classes)
  3. |
  4. |
  5. //- the class attribute may also be repeated to merge arrays
  6. a.bang(class=classes class=['bing'])
  1. <a class="foo bar baz"></a>
  2. <a class="bang foo bar baz bing"></a>

It can also be an object which maps class names to true or false values. This is useful for applying conditional classes

  1. - var currentUrl = '/about'
  2. a(class={active: currentUrl === '/'} href='/') Home
  3. |
  4. |
  5. a(class={active: currentUrl === '/about'} href='/about') About
  1. <a href="/">Home</a>
  2. <a class="active" href="/about">About</a>

Class Literal

Classes may be defined using a .classname syntax:

  1. a.button
  1. <a class="button"></a>

Since div's are such a common choice of tag, it is the default if you omit the tag name:

  1. .content
  1. <div class="content"></div>

ID Literal

IDs may be defined using a #idname syntax:

  1. a#main-link
  1. <a id="main-link"></a>

Since div's are such a common choice of tag, it is the default if you omit the tag name:

  1. #content
  1. <div id="content"></div>

&attributes

Pronounced as “and attributes”, the &attributes syntax can be used to explode an object into attributes of an element.

  1. div#foo(data-bar="foo")&attributes({'data-foo': 'bar'})
  1. <div id="foo" data-bar="foo" data-foo="bar"></div>

The above example uses an object literal. But you can also use a variable whose value is an object, too. (See also: Mixin Attributes).

  1. - var attributes = {};
  2. - attributes.class = 'baz';
  3. div#foo(data-bar="foo")&attributes(attributes)
  1. <div class="baz" id="foo" data-bar="foo"></div>
Caution

Attributes applied using &attributes are not automatically escaped. You must be sure to sanitize any user inputs to avoid cross-site scripting (XSS). If passing in attributes from a mixin call, this is done automatically.