Core UI

All core UI elements

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.

---

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.

🟨 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.

---

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.

🟨 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