# 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](/files/RDx3bOTpYMcMOSsJfwVZ)

{% 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](/files/0qYAoxzyw6GlTQpGdkSn)

## 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](/umbraco-cms/customizing/umbraco-package.md) 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](/files/PtmABiJblwd3V52LSSFX)

### 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`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/style-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.