Add a contextual sidebar

  • Release version: Australia
  • Updated March 12, 2026
  • 1 minute to read

    • Add a contextual sidebar to a page with UI Builder to display related content using a vertical tab structure.

    Before you begin

    Role required: ui_builder_admin

    About this task

    You can configure the contextual sidebar in the same way you would configure a tab component. Each vertical tab in the contextual sidebar renders custom content. You can place components in each tab for quick access directly from the page.

    For example, a document creation page might have the attachments component on one tab, enabling you to attach files related to the document that you're working on. On another tab, there could be a nested comments component, enabling you to add and view comments related to the document.

    Procedure

    1. Navigate to All > Now Experience Framework > UI Builder.
    2. Open an experience to work in or create an experience by selecting Create > Experience.
      See Configure how users interact with your applications in UI Builder for more information on creating experiences.
    3. Create or open a page or page variant.
      For more information about how to create a page in UI Builder, see Create a page in UI Builder. For information about creating a page variant, see Create a page variant
    4. On the stage, open the toolbox by selecting the + Add content button.
    5. Select the Single column layout tile.
    6. In the column, open the toolbox by selecting the + icon.
    7. Select the Contextual sidebar component to add it to your page.

      UI Builder editor with the toolbox open, showing a black arrow pointing to the contextual sidebar component.

      The contextual sidebar appears on the stage, and the Tabs section appears in the configuration panel.
    8. In the configuration panel under the Tabs section, select the settings icon (Settings icon.) to configure the tab.
      1. On the form, fill in the fields.
        Table 1. Tab settings form
        Field Description
        Tab label Label that displays on the tab for your page.
        Icon Icon that appears next to the tab label.
        Note:
        Icons aren't required.
        Hide tab Option to hide or display the tab.
      2. Select Save.
    9. On the stage in the contextual sidebar, open the toolbox by selecting the + icon.
    10. Select the component that you want to add to the tab.
      The component displays under the tab in the content tree. For more information, see Add and configure components.
    11. Optional: To add another tab, select + Add under the Tabs section.

    What to do next

    For detailed information about the configuration of the contextual sidebar and its properties, see Tabs UIB Setup on the ServiceNow Developer Site.