---
sourceDocument: Australia Build or modify applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/application-development

 Release :

    - australia

ft:locale :

    - pt-BR

ft:publication_title :

    - Australia Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Add a contextual sidebar

# Add a contextual sidebar {#ariaid-title1}

* Versão de lançamento: Australia
* 
* Atualizado 12 de mar. de 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 min. de leitura

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

## Antes de Iniciar

Role required: ui_builder_admin

## Por Que e Quando Desempenhar Esta Tarefa

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.

## Procedimento

1. Navigate to AllNow Experience FrameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   See [Configure how users interact with your applications in UI Builder](https://servicenow-prod.fluidtopics.net/dUVGdKGQs6AbFNSw~vNKcQ "Learn what an experience is in UI Builder. Understand what an experience contains.") 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](https://servicenow-prod.fluidtopics.net/SclXrv5libg5iBN91G7scQ "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users."). For information about creating a page variant, see [Create a page variant](https://servicenow-prod.fluidtopics.net/uEfLsx6HC8nqz7WkEcRmOg "A page variant in UI Builder is a variation of a page that exists at the same path that targets different audiences using user criteria.")
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.  
   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.  
      {#add-contextual-sidebar__table_usy_s1c_wtb__entry__2}

      | Field | Description |
      |-|-|
      | Tab label | Label that displays on the tab for your page. |
      | Icon | Icon that appears next to the tab label. Nota: Icons aren't required. |
      | Hide tab | Option to hide or display the tab. |
      [Tabela 1. Tab settings form]

      {#add-contextual-sidebar__table_usy_s1c_wtb}
   2. Select Save.
   {#add-contextual-sidebar__substeps_sjd_sfs_wbc}
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](https://servicenow-prod.fluidtopics.net/cbYaV7wlkZDBulAnOqnPNA#add-components "Learn how to add components to your page in UI Builder. A page is built by adding components.").
11. **Opcional:** To add another tab, select + Add under the Tabs section.
{#add-contextual-sidebar__steps_a5t_tvr_wbc}

## O que Fazer Depois

For detailed information about the configuration of the contextual sidebar and its properties, see [Tabs UIB Setup](https://developer.servicenow.com/dev.do#!/reference/next-experience/washingtondc/now-components/now-tabs/uib-setup) on the ServiceNow Developer Site.