--- title: Add Tabs with Rich Content Editor description: Add tabs to your rich content to help your users navigate efficiently by allowing them to select the various tabs to reveal the associated content within them. locale: en-US canonical_url: https://www.servicenow.com/docs/r/australia/employee-service-management/employee-experience-foundation/ec-rich-content-tabs.html release: australia product: Employee Experience Foundation classification: employee-experience-foundation topic_type: task last_updated: "2026-03-12" reading_time_minutes: 5 breadcrumb: [Microsites, Creating employee communications, Authoring and managing employee communications, Employee Center Pro, Unified Employee Experience, Employee Service Management] --- # Add Tabs with Rich Content Editor Add tabs to your rich content to help your users navigate efficiently by allowing them to select the various tabs to reveal the associated content within them. ## Before you begin Role required: sn\_cd.content\_manager Fill in the New content form fields. See [Create rich content](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/employee-experience-foundation/ec-content-library-portal-rich-content.md) Create the page layout using modules or columns. - Modules are predefined content layouts comprised of header, paragraph text, and images. See [Add predefined content layouts with the Rich Content Editor](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/employee-experience-foundation/add-modules-rich-content-editor.md) - Columns are containers that enable you to define a custom layout. See [Add columns with the Rich Content Editor](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/employee-experience-foundation/ec-rich-content-canvas.md) ## About this task You can add other components under a tab, like an Image, Video, Text, Text section, Link, Link block, or Button. When you drop the **Tabs** component into your canvas, an area below the tabs appears that allows you to drop other components into it. **Note:** When the **Tabs** functionality is not enabled, try reinstalling the Content Publishing application. ## Procedure 1. Navigate to the canvas by selecting the **Open editor** button from the **Design** tab of the **New content** form. 2. From the **Rich Content Editor** canvas, you can use a drag-and-drop method to add tabs. \[Omitted image "ec-rich-content-tabs.png"\] Alt text: Rich Content Editor - Tabs 3. To add more tabs, select the entire tab component and click **Add item**, located in **Settings** > **Properties**. \[Omitted image "ec-rich-content-add-tab.png"\] Alt text: Add more tabs by clicking the Add item button 4. Select a tab you added to your canvas. 5. To change the color of the tabs, first click into the color palette. 6. From the **Settings** tab, select **Styling**. 7. Enter the color code that represents the color you want to appear. All HTML colors are supported. For more information, see [HTML color names](https://htmlcolorcodes.com/color-picker/). 8. Or, you can select the color picker \(grey square\) to the right of the **Background Color** field. \[Omitted image "ec-rich-content-color-button.png"\] Alt text: Rich Content Editor - Color selector 9. Click into the color palette that appears. \[Omitted image "ec-rich-content-color-palette.png"\] Alt text: Rich Content Editor - Color palette 10. After selecting a color from the color palette, use the slide bar on the right side to fine tune your color. Slide the bar up and down. \[Omitted image "ec-rich-content-slide-bar.png"\] Alt text: Rich Content Editor - Color palette slide bar 11. Use the bottom slide bar to lighten or darken your color. \[Omitted image "ec-rich-content-bottom-slide.png"\] Alt text: Rich Content Editor - Bottom slide bar **Note:** When previewing your changes and you select the tab, the colors or outline of the tab may show the default colors of the portal theme. 12. You can edit or change the text that appears on the tab by highlighting **Tab Title** and overwriting it. 13. You can edit the size of each tab and the font of the **Tab title** by selecting a tab and then selecting **Advanced styling**. 14. You can drop other components into the area below the Tabs you added to your canvas. \[Omitted image "ec-rich-content-adv-styling.png"\] Alt text: Rich Content Editor - Advanced styling
Field Description
Width Edit the width of each tab by selecting it and using the **Width** drop-down. Your choices are:- auto: Size is based on the content within the tab. If you enter additional text in the tab, the width automatically increases. - px: Use pixels as your measurement. - %: Use a percentage as your measurement.
Height Edit the height of each tab by selecting it and using the **Height** drop-down. Your choices are:- auto: Size is based on the content within the tab. If you enter additional text in the tab, the width automatically increases. - px: Use pixels as your measurement. - %: Use a percentage as your measurement.
Font name Select the drop-down to choose a specific font.
Font size Enter a number to change the font size or use the up and down arrows to make the font smaller or larger.
Font weight Determines how bold or light your text on the button appears. Select the drop-down arrow to choose a different weight.
Line height Determines the distance between lines of text. Use the up and down arrows to make line height smaller or larger.
Font color Defines the color of the font. Select the color picker \(grey square\) to the right of the **Font color** field. Click into the color palette, and choose the color you want. Use the slide-bars on the right and bottom to fine tune your color. **Note:** When previewing your changes and you select the tab, the color of the text may show the default colors of the portal theme.
15. Edit the **Title** field under **Properties**. The text you enter appears as hover text for the tab and the screen reader announces it. 16. Select **Save** or **Save and Finish**. Selecting **Save** saves your content and you remain on the **Rich Content Editor** canvas. Selecting **Save and Finish** saves your record and returns you to the **New content** form. ## What to do next - \(Optional\) Translate your content. Request language translation for your content. For more information, see [Multilingual support in the Content Library](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/employee-experience-foundation/ec-switch-language.md). **Note:** Only translate content after you are done modifying the content. For best results, we do not recommend that you add or remove components or change the formatting after translation. To create rich content that is formatted differently in different languages, duplicate the content and modify the formatting as needed. Then, use Audiences to target the content to users by language. See [Audiences](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/employee-experience-foundation/ecpro-audience.md) - Preview your content from the **Publish** tab. **Note:** Content Preview is designed to provide a general idea of how your content looks. Content may look different once published due to variations in device resolution, theme difference, or mobile app style configuration. - Configure a publish plan to control where the content is delivered, the audience, and the period of time it is available: [Create a publish plan for your content](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/employee-experience-foundation/ec-content-library-publish2.md).