# Tabs and sections

The Bubble editor is organized into *tabs* that align with the different aspects of app development, such as design, data management, style customization, and technical settings/logs. Some tabs are further segmented into *sections*.

**Tabs** are navigated using the left-hand menu that remains visible at all times.

<figure><img src="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2Fe3kcAYsnBXifZFe0iH1L%2Fbubble-left-toolbar.png?alt=media&#x26;token=d9857328-27df-43b3-a9fb-53c04fe3396f" alt=""><figcaption><p>The left-hand bar gives you quick access to all <strong>tabs</strong> in the Bubble editor at all times.</p></figcaption></figure>

**Sections** (when available) are navigated using the menu that is visible at the top of the currently active tab:

<figure><img src="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2F0FClqFRUAQ8CZvBhqQ55%2Fbubble-subtabs.png?alt=media&#x26;token=6f091059-0e70-4f5a-807f-c62988d0c7e2" alt=""><figcaption><p>Some tabs are further divided into <strong>sections</strong> relevant for that tab.</p></figcaption></figure>

These two bars make up the Bubble editor navigation, and contain the following tabs and sections:

### Design

The design tab is where you design pages in your app by adding elements such as text, images, buttons and icons.

Article: [The Design tab](https://manual.bubble.io/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/design-tab)\
Article series: [Design](https://manual.bubble.io/help-guides/design)

### Workflow

The workflow[^1] tab is where you set up events and actions to instruct Bubble what to do as the user interacts with your app, such as what happens when a button is clicked.

Article: [The Workflow tab](https://manual.bubble.io/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/workflow-tab)\
Article series: [Workflows](https://manual.bubble.io/help-guides/logic/workflows)

#### The backend workflow editor

If you have enabled the [Workflow API](#user-content-fn-2)[^2] in your app, you can access the backend workflow editor by using the *Pages* dropdown and clicking the *Backend workflows* link at the bottom. You can learn more in the links below. If you are just starting to learn Bubble, this is a more advanced topic.

Article: [The Workflow API](https://manual.bubble.io/help-guides/integrations/api/the-bubble-api/the-workflow-api)\
Article section: [Enabling the Workflow API](https://manual.bubble.io/integrations/api/the-bubble-api/the-workflow-api#activating-the-workflow-api)\
Article section: [Accessing the backend workflow editor](https://manual.bubble.io/integrations/api/the-bubble-api/the-workflow-api#accessing-the-backend-workflow-editor)

### Styles

#### Element styles

Element styles are collections of style settings that you can apply to elements, including color, shadow, font, borders and responsive behavior.

Article: [The Styles tab](https://manual.bubble.io/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/styles-tab)\
Article series: [Styling](https://manual.bubble.io/help-guides/design/styling)

#### Style variables

Style variables are used to store font and color variables that can be applied to elements or element styles.

\
Article: [Font variables](https://manual.bubble.io/help-guides/design/styling/font-variables)\
Article: [Color variables](https://manual.bubble.io/help-guides/design/styling/color-variables)

### Plugins

The Plugins tab is where you install, uninstall and update plugins in your app.

Article: [The plugin tab](https://manual.bubble.io/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/plugins-tab)\
Article: [Plugins](https://manual.bubble.io/help-guides/integrations/using-plugins)

## Other ways to learn

<details>

<summary>Core reference</summary>

The core reference section below covers each individual setting in each of Bubble's tabs and sections.

Core reference: [Bubble's interface](https://manual.bubble.io/core-resources/bubbles-interface)

</details>

[^1]: A *workflow* is the combination of an *event* that triggers one or more *actions*.\
    \
    They are how you instruct Bubble to respond to what the user does.\
    \
    Article: [Workflows](https://manual.bubble.io/help-guides/logic/workflows)

[^2]: The *Workflow API* is the part of Bubble's API that allows you to enable other apps and systems to trigger API workflows in your app.\
    \
    Article: [The Workflow API](https://manual.bubble.io/help-guides/integrations/api/the-bubble-api/the-workflow-api)\
    Article series: [The Bubble API](https://manual.bubble.io/help-guides/integrations/api/the-bubble-api)


---

# 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://manual.bubble.io/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections.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.