---
title: "List Styles plugin"
description: "Create styled number and bulleted lists."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/advlist/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/advlist/index.md"
version: "latest"
last_updated: "2026-03-09T01:59:33Z"
tokens: 1882
---
# List Styles plugin

The `advlist` plugin extends the core `bullist` and `numlist` toolbar controls by adding CSS `list-style-type` styled number formats and bullet types to the controls.

> **Important:** The [Lists](../lists/) (`lists`) plugin must be activated for the `advlist` plugin to work.

> **Tip:** As of TinyMCE 7.0, the Advanced Lists plugin has been renamed to List Styles. When adding List Styles in your editor, continue to use advlist.

## Basic setup

```js
tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'lists advlist'
});
```

> **Note:** For information on bundling this plugin with module bundlers, see [Bundling TinyMCE - Overview](../bundling-guide/).

## Interactive demo

**Example**

```js
tinymce.init({
    selector: '#advlist-demo',
    plugins: [
        'advlist', 'anchor', 'autolink', 'charmap', 'code', 'fullscreen',
        'help', 'image', 'insertdatetime', 'link', 'lists', 'media',
        'preview', 'searchreplace', 'table', 'visualblocks', 'wordcount'
    ],
    toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code | fullscreen | help',
    menubar: 'file edit view insert format tools table help',
    height: 600,

    setup: (editor) => {
      editor.ui.registry.addContextToolbar('textselection', {
        predicate: () => !editor.selection.isCollapsed(),
        items: 'bullist numlist',
        position: 'selection', // 'selection' | 'node' | 'line'
        scope: 'node'
      });
    }
});
```

## Options

These settings affect the execution of the `advlist` plugin by providing more granular control of list styles.

### `advlist_bullet_styles`

This option allows you to include specific unordered list item markers in the default `bullist` toolbar control.

**Type:** `String`

**Default value:** `'default,circle,square'`

**Possible values:**

- `default`: the browser’s default style
- `circle`: a hollow circle
- `disc`: a filled circle
- `square`: a filled square

#### Example: using `advlist_bullet_styles`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'lists advlist',
  toolbar: 'bullist',
  advlist_bullet_styles: 'square'  // only include square bullets in list
});
```

### `advlist_number_styles`

This option allows you to include specific ordered list item markers in the default `numlist` toolbar control.

**Type:** `String`

**Default value:** `'default,lower-alpha,lower-greek,lower-roman,upper-alpha,upper-roman'`

**Possible values:**

- `default`: the browser’s default style
- `lower-alpha`: lowercase ASCII letters, e.g. a, b, c, …​ z
- `lower-greek`: lowercase classical Greek (alpha, beta, gamma), e.g. α, β, γ …​
- `lower-roman`: lowercase roman numerals, e.g. i, ii, iii, iv, v …​
- `upper-alpha`: uppercase ASCII letters, e.g. A, B, C, …​ Z
- `upper-roman`: uppercase roman numerals, e.g. I, II, III, IV, V …​

#### Example: using `advlist_number_styles`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'lists advlist',
  toolbar: 'numlist',
  advlist_number_styles: 'lower-alpha'  // only include lower alpha in list
});
```

## Toolbar buttons

The List Styles plugin provides the following toolbar buttons:

| Toolbar button identifier | Description |
| --- | --- |
| `bullist` | Formats the current selection as a bullet list with dropdown options for different bullet styles (disc, circle, square). |
| `numlist` | Formats the current selection as a numbered list with dropdown options for different number styles (decimal, alpha, roman, greek). |

> **Note:** The List Styles plugin extends the core `bullist` and `numlist` toolbar buttons by adding dropdown arrows that allow users to select from different list styles. These buttons are provided by the core `lists` plugin, but the dropdown functionality is added by the List Styles plugin.
These toolbar buttons can be added to the editor using:

- The [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Menu items

The List Styles plugin provides the following menu items:

| Menu item identifier | [Default Menu Location](../menus-configuration-options/#example-the-tinymce-default-menu-items) | Description |
| --- | --- | --- |
| `bullist` | Format | Formats the current selection as a bullet list with dropdown options for different bullet styles. |
| `numlist` | Format | Formats the current selection as a numbered list with dropdown options for different number styles. |

> **Note:** The List Styles plugin extends the core list menu items in the **Format** menu by adding dropdown functionality that allows users to select from different list styles. These menu items are provided by the core `lists` plugin, but the dropdown functionality is added by the List Styles plugin.
These menu items can be added to the editor using:

- The [`menu`](../menus-configuration-options/#menu) configuration option.
- The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option.
- [Custom Menu toolbar buttons](../custom-menu-toolbar-button/).

## Commands

The List Styles plugin provides the following TinyMCE commands.

| Command | Description |
| --- | --- |
| ApplyOrderedListStyle | Converts the current selection to an ordered list. Accepts an object specifing the list type. |
| ApplyUnorderedListStyle | Converts the current selection to an unordered list. Accepts an object specifing the list type. |

For information on available list types, see: [MDN web docs - list-style-type](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#Values).

Examples
```js
tinymce.activeEditor.execCommand('ApplyOrderedListStyle', false, {
  'list-style-type': 'decimal'
});
tinymce.activeEditor.execCommand('ApplyUnorderedListStyle', false, {
  'list-style-type': 'disc'
});
```

## Inline formatting

List bullets and list numbers can now be inline-formatted.

Inline-formatting, also known as spot-formatting, is the direct formatting of an object. It contrasts with formatting applied to an object because that object is a particular type of object.

As of TinyMCE 6.2, a sub-set of all inline-formatting options can be applied to list bullets and list numbers.

If an end-user selects the entire contents of a list item and applies inline formatting — such as a color change or a font-size change — this spot-formatting is also applied to the list item’s associated bullet or number.

Only the list bullets or list numbers associated with the selection take on the inline-formatting applied to the selection.

If the selection having inline formatting applied is one list item (that is, if the selection runs from one `<li>` tag to its associated `</li>` tag), the bullet or number associated with the selected list item takes on the inline-formatting applied to the selection.

If the selection is the entire list, (that is, if the selection runs from the list’s opening `<ol>` or `<ul>` tag to the closing `</ol>` or `</ul>` tag, or if the selection runs from the list’s first `<li>` tag to the last `</li>` tag), every bullet or number takes on the inline-formatting applied to the selection.

> **Important:** If, after applying inline-formatting, a partial selection of the now inline-formatted material is made and said inline-formatting is removed from the partial selection, the list bullet or list number formatting will also be removed.

### PowerPaste Premium plugin support

Users of the [PowerPaste](../introduction-to-powerpaste/) Premium plugin should note, this plugin does not, currently, support inline-formatted bullets or list numbers.

Inline-formatting, as applied to the bullets or list numbers, is lost when such material is copied and pasted using the PowerPaste plugin.

> **Note:** Inline-formatting as applied to list elements has always been supported by [PowerPaste](../introduction-to-powerpaste/) and continues to be so supported.