# 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/~/changes/1188/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/design-tab)\
Article series: [Design](https://manual.bubble.io/~/changes/1188/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/~/changes/1188/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/workflow-tab)\
Article series: [Workflows](https://manual.bubble.io/~/changes/1188/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/~/changes/1188/help-guides/integrations/api/the-bubble-api/the-workflow-api)\
Article section: [Enabling the Workflow API](https://manual.bubble.io/~/changes/1188/integrations/api/the-bubble-api/the-workflow-api#activating-the-workflow-api)\
Article section: [Accessing the backend workflow editor](https://manual.bubble.io/~/changes/1188/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/~/changes/1188/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/styles-tab)\
Article series: [Styling](https://manual.bubble.io/~/changes/1188/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/~/changes/1188/help-guides/design/styling/font-variables)\
Article: [Color variables](https://manual.bubble.io/~/changes/1188/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/~/changes/1188/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/plugins-tab)\
Article: [Plugins](https://manual.bubble.io/~/changes/1188/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/~/changes/1188/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/~/changes/1188/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/~/changes/1188/help-guides/integrations/api/the-bubble-api/the-workflow-api)\
    Article series: [The Bubble API](https://manual.bubble.io/~/changes/1188/help-guides/integrations/api/the-bubble-api)