---
title: "Advanced List 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/5/advlist/index.md"
version: "5"
last_updated: "2024-03-26T08:09:19Z"
tokens: 753
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/advlist/).
# Advanced List 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.

## Basic setup

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

## 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,disc,square'`

**Possible Values:**

- `default`: your 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: 'advlist',
    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`: your 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: 'advlist',
  advlist_number_styles: 'lower-alpha'  // only include lower alpha in list
});
```

## Commands

The Advanced Lists plugin provides the following JavaScript 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': 'disc'
});
tinymce.activeEditor.execCommand('ApplyUnorderedListStyle', false, {
  'list-style-type': 'decimal'
});
```