# Style Menu

A Style Select Menu is a configurable extension that adds a cascading menu to the toolbar for applying text styles and formatting. Use a Style Select menu when you want editors to apply predefined, consistent styles instead of manually formatting text.

![Rich Text Editor cascading style menu](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-792805a78e802700fac0c96508f61a2b74bd1c52%2Frte-tiptap-stylemenu.png?alt=media)

{% hint style="info" %}
Any custom stylesheets associated with the Rich Text Editor will not auto-generate a style select menu in the toolbar. See the [Creating a Style Select Menu](#creating-a-custom-style-select-menu) section below.
{% endhint %}

## Adding Style Select to Rich Text Editor

To add Style Select to the Rich Text Editor:

1. Go to **Settings**.
2. Navigate to **Data Types**.
3. Select the relevant Data Type.
4. Drag **Style Select** from **Available Actions** into the **Toolbar** section.
5. Click **Save**.

Alternatively, while configuring an editor on a Document Type, you can drag **Style Select** from **Available Actions** into the **Toolbar** section.

![Adding Style Select to the Rich Text Editor](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-546ec7c47bae80995b1a0affc550fbc37c075cbb%2Fadding-style-select-to-toolbar.png?alt=media)

## Creating a Custom Style Select Menu

Adding Style Select enables the menu, but creating a package manifest is only required if you want custom styles or structure.

Below, you can find an example of how to set up a custom Style Select menu using an [Umbraco Package Manifest](https://docs.umbraco.com/umbraco-cms/customizing/umbraco-package) file.

1. Create an `umbraco-package.json` file in `App_Plugins/{YourPackageName}`.

{% code title="umbraco-package.json" %}

```json
{
    "name": "Name of your package",
    "alias": "My.Package",
    "extensions": [
        {
            "type": "tiptapToolbarExtension",
            "kind": "styleMenu",
            "alias": "MyCustom.Tiptap.StyleMenu",
            "name": "My Custom Tiptap Style Menu",
            "meta": {
                "alias": "myCustomStyleMenu",
                "icon": "icon-palette",
                "label": "My custom styles"
            },
            "items": [
                {
                    "label": "Headings",
                    "items": [
                        {
                            "label": "Heading 2",
                            "data": { "tag": "h2" },
                            "appearance": { "icon": "icon-heading-2" }
                        },
                        {
                            "label": "Heading 3",
                            "data": { "tag": "h3" },
                            "appearance": { "style": "font-size: large;" }
                        },
                        {
                            "label": "Heading 4",
                            "data": { "tag": "h4" }
                        }
                    ]
                },
                {
                    "label": "Attributes",
                    "items": [
                        {
                            "label": "Classes",
                            "data": { "class": "foo" }
                        },
                        { 
                            "label": "IDs",
                            "data": { "id": "bar" }
                        },
                        {
                            "label": "Mixed",
                            "data": { "tag": "span", "class": "foo", "id": "bar" }
                        }
                    ]
                }
            ]
        }
    ]
}
```

{% endcode %}

The `items` property defines the structure of the style select menu. Each menu item has the following options:

* `label`: *(required)* The label of the menu item. This supports localization keys.
* `appearance`: This defines the appearance of the menu item. The value has 2 optional properties:
  * `icon`: To prefix an icon to the menu item.
  * `style`: To apply CSS rules to the menu item.
* `data`: To configure the function of the style select menu item. The value has 3 optional properties:
  * `tag`: A [supported HTML tag](#supported-html-tags) name. This will be applied to the selected text.
  * `class`: Applies a class attribute with the defined class name to the containing tag of the selected text.
  * `id`: Applies an ID attribute with the defined ID value to the containing tag of the selected text.
* `separatorAfter`: When `true`, it will add a line separator after the menu item.
* `items`: To enable a cascading menu, an array of nested menu items may be added.

2. Once configured, the custom style select menu will appear in the Rich Text Editor's **Toolbar** section. You can look for it in the **Available actions** block.

![Custom Style Select menu](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-72677a589bbec7e925513e47d32a2c336d96037f%2Fcustom-style-select-menu.png?alt=media)

### Supported HTML tags

Due to Tiptap’s strict rich-text schema, only supported HTML tags are allowed in the style select menu *(arbitrary markup will be excluded)*. The following HTML tag names are supported:

* `h1`
* `h2`
* `h3`
* `h4`
* `h5`
* `h6`
* `p`
* `a` (link)
* `blockquote`
* `code`
* `codeBlock`
* `div`
* `em` (italic)
* `ol`
* `strong` (bold)
* `s` (strike-through)
* `span`
* `u` (underline)
* `ul`