--- layout: v0.20 permalink: /0.20/docs/modules/toolbar/ title: Toolbar Module - Quill v0.20 ---

# Toolbar

The Toolbar module allow users to easily format Quill’s contents.

Simply create a container and the module to the Quill editor.

    <!-- Create toolbar container -->
    <div id="toolbar">
      <!-- Add font size dropdown -->
      <select class="ql-size">
        <option value="10px">Small</option>
        <option value="13px" selected>Normal</option>
        <option value="18px">Large</option>
        <option value="32px">Huge</option>
      </select>
      <!-- Add a bold button -->
      <button class="ql-bold"></button>
    </div>
    <div id="editor"></div>

    <!-- Initialize editor and toolbar -->
    <script>
      var editor = new Quill('#editor');
      editor.addModule('toolbar', {
        container: '#toolbar'     // Selector for toolbar container
      });
    </script>

The `ql-toolbar` class will be added to the toolbar container.

A click handler will be added to any DOM element with the following classes:

- `ql-bold`
- `ql-italic`
- `ql-strike`
- `ql-underline`
- `ql-link`

A change (DOM `change` event) handler will be added to any DOM element with the following classes:

- `ql-background`
- `ql-color`
- `ql-font`
- `ql-size`

The toolbar will also listen to cursor movements and will add an `ql-active` class to elements in the toolbar that corresponds to the format of the text the cursor is on.

The following classes are also recognized by the toolbar but largely used by Themes for styling:

- `ql-format-button`
- `ql-format-group`
- `ql-format-separator`