> For the complete documentation index, see [llms.txt](https://bubble.citizendev.io/bubble-convention/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bubble.citizendev.io/bubble-convention/naming-conventions/element-naming/groups.md). # Groups Groups make up the structure of an application, hence a dedicated page to explain the naming of groups (because, you know, they are supposed to be in the Visual elements page). Group names are recommended as followed. ### Structural groups Structural groups are the most outer groups within a page. They define the structure of a page. Structural groups are recommended to use the following names and categorization. These names are inspired by HTML tags as well as component names from other visual builders such as WordPress Oxygen Builder or Webflow. * **Header**: For the header, obviously. If it's a reusable component, either **`Header`** or **`[Container] Header`** should be fine. * **Footer**: Similar to Header. * **Body**: The main container of the page. This should be used to control max width or padding of the page's inner content, so it's a very important group. Many modern layouts are not full width (e.g. Facebook), so using a Body group helps maintain the width of the contents. A basic layout of a page consists of a Header, a Body and a Footer. * **Section**: In the case of multiple sections with different widths required, the Body can be broken down into multiple smaller sections. ### Regular groups It's highly recommended that the Group type (e.g. Popup, FloatingGroup) should persist being in front of the name like usual: **`{Group type} {Group name}`**. This is for Bubble to sort the elements by type, and for users to easily recognize the type of the element. Swapping the type and the name makes more sense grammatically, but not programmatically. For example: **`Group Testimonials`***,* **`FloatingGroup Sidebar`***,* **`Popup Deletion Confirmation`***.* > It's similar to a thing in traditional code called *type declaration*. ### Sub groups Occasionally, the groups in a page require a way to be grouped together in other for the ease of management, without having to break them into a separate reusable element. This is similar to the grouping demonstrated in the Other notations page. In that case, you can use **`[{Parent's name}] {Group type} {Group name}`**. For instance: * Parent group: **`FloatingGroup Nav`** * Sub group: **`[Nav] Group Menu`** ### Repeating groups Repeating groups have to come with a data type. Hence, the data type is recommended to be referred to directly in the name: **`RepeatingGroup {Data type}`** or **`RG {Data type}`**. For instance: **`RG Comment`**. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://bubble.citizendev.io/bubble-convention/naming-conventions/element-naming/groups.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.