**BDUK** is split into two sections `core/` and `components` the core UI covers the following.
* **Header** **—** With slots for branding, buttons, and maybe one day a picture of your nan's cat.
* **Footer** **—** Button hints, status text, and keybind rows for people who forget controls.
* **Sidebar** **—** Optional side menu with submenu support.
* **Content** **—** Where your actual UI goes.. the meat and veg so to speak.
* **Tooltip** **—** Hover text system. Originally from my inventory UI. Now universal.
***
{% hint style="info" %}
Header sections can support any of the support components they are entirely interchangeable, you are not fixed to the layout shown in the example image.
{% endhint %}
## 🟨 1. Header (Left)
Used here for branding — includes:
* A `group` with a `logo` and `text`
***
## 🟥 2. Header (Center)
Used here for **tabs** navigation:
* Dynamically switch between pages using a `tabs` element.
***
## 🟩 3. Header (Right)
This section contains a **namecard** and optional **buttons** like `Save` and `Exit`.
***
## 🟦 4. Content (Left)
The core content section is broken down into 3 sections `left|center|right`, like the header and footer. \
You have full control over the layout of this section.
Currently covers two pre-built components:
* Cards
* Displays item cards in a grid layout.
* Each card supports images, labels, embedded actions tooltips.. etc.
* Can be used to make anything from crafting script UI's to vehicle stores.
* Input Groups
* Displays groups of inputs in optional expandable containers.
* Can be used to make clothing menus, vehicle custom options or anything else you can think of.
***
## 🟥 5. Tooltip
Tooltips display **on-hover** for cards or other items:
* Includes structured info: description, value pairs, actions.
* Can display arrays of lines and metadata like rarity.
* Supports key press actions on hover — Similar to how some survival games work.
This system is global and reusable — not limited to cards.
***
## 🟪 6. Sidebar
Optional and modular vertical menu:
* Contains sections with label + item groups.
* Items can have submenus and trigger actions.
* Perfect for admin menus or editor tools.
***
{% hint style="info" %}
Footer sections can support any of the support components they are entirely interchangeable, you are not fixed to the layout shown in the example image.
{% endhint %}
## 🟨 7. Footer (Left)
Standard **button group** placed on the left:
* `Deploy`, `Cancel`, etc.
* Can be any number of buttons and can include `modal` or `on_click` actions.
***
## 🟥 8. Footer (Centre)
Here it's a **text** element ("Ready to deploy"), but you can swap it with:
* Progress bar
* Page indicator
* Custom HTML/text component
***
## 🟩 9. Footer (Right)
A simple **keybind display** using `actions`:
* Shows user what key does what
* Like `ESC = Close`, `E = Confirm`
Supports dynamic binding for different workflows.
***
## Recap
Each section supports three alignment zones:
* `left`, `centre`, `right`
* Each zone can contain any number of supported components
| Area | Description |
| ------- | ----------------------------------- |
| Header | Branding, controls, nav, info |
| Footer | Actions, messaging, keybinds |
| Content | The main view (multi-pane optional) |
| Sidebar | Expandable category menu |
| Tooltip | Dynamic hover info popup |
---
# 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://docs.boii.dev/fivem-free-resources/bduk/core-ui.md?ask=
```
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.