---
sidebar_position: 10
---
# Bottom Bar UI (Desktop)

### Overview
- Full bottom bar with all controls visible
- Horizontal layout maximizing screen width

![Desktop Bottom Bar UI Layout](../img/05-main-scene/bottom-ui-desktop.png)

### Step 1: Set Up Prefab Editor    

| Step | Action | image |
|------|---------|--------------|
| 1. Locate Prefab | Search for `ui-bottom-bar-panel` prefab | ![Locate Prefabs](../img/05-main-scene/add-texture-bottom-bar-prefab.png) |
| 2. Find Assets | Navigate to `core/editor` directory | ![Copy UI Folder](../img/05-main-scene/add-texture-label-prefab.png) |
| 3. Clone Assets | Copy / Paste to game assets location | ![Asset Placement](../img/05-main-scene/editor-texture-label-prefab.png) |

---

### Step 2: Configure Prefabs  

#### Core Prefabs Structure 
Navigate to the location where the prefabs: `assets\core-assets\hyper-core\packages\ui\desktop-ui\prefabs\`
![Directory Structure](../img/05-main-scene/add-texture-bottom-bar-prefab2.png)   

#### Rename Prefabs      
Rename the copied prefabs by removing unnecessary prefixes: 
| Prefix to Remove | Original Prefab Name | Final Name |
|------------------|----------------------|------------|
| `template-new-`  | `template-new-ui-bottom-bar-panel` | `ui-bottom-bar-panel`     |
| `template-`      | `template-button-auto-selection`   | `button-auto-selection` |     


```jsx title="The folder structure is as follows:"
    assets\game-assets\prefabs
```


![Prefab Naming Example](../img/05-main-scene/rename-prefab.png)

#### Customize *`button-auto-selection`* Label  

**Follow Design:**
Use the `template-label-auto-selection` to customize the appearance of the label inside the `button-auto-selection` prefab.

| Component            | Description                                       |
| -------------------- | ------------------------------------------------- |
| **Label Outline**    | Add an outline to make the text stand out.        |
| **Label Shadow**     | Add a shadow for better contrast and readability. |
| -------------------- | ------------------------------------------------- |

![Label Configuration Options](../img/05-main-scene/option-for-label.png)

#### Customize *`ui-bottom-bar-panel`* Label
Use `assets\game-assets\editor\bottom-ui\template-label-title` to customize the `ui-bottom-bar-panel`:  
:::info
🔗[Follow the same configuration as Button Auto Selection Labels](#customize-button-auto-selection-label)     
Bottom bar labels include a localization component for multi-language support 
:::

![component-locale](../img/05-main-scene/component-locale.png)  

The `FormatText` property controls text formatting behavior for label components:

| Property | Description | Example |
|----------|-------------|---------|
| `default` | Initial formatting state | `false` |
| `notify` | Formatting update callback | Updates when value changes |

---

### Step 3: Set Up UI In Main Scenes

Create new node and configuration in your main scene:                    
![main scenes](../img/05-main-scene/set-positon-bottom-bar.png)    

#### Platform Node Spawner Settings

🔗 Details: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner)

### Step 4: Apply Textures 

#### Texture Button Bar    
Checklist assets completed for bottom UI and button UI text   
:::info
🔗 Details: [Game Asset Structure](http://localhost:3000/docs/category/game-asset-structure)
:::      
 ![main scenes](../img/05-main-scene/prepare-ui-bottom-bar.png)    

#### Run the Helper Tool

To configure the bottom bar UI helper.
:::info
🔗Details: [UI Bottom Bar Desktop Helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
:::

---