# Header

<figure><img src="https://3046942752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHfd391cB6wDC8S3yHcie%2Fuploads%2Flio1hIFGOu1FFvjITQ7T%2Fimage.png?alt=media&#x26;token=ef6d3ad6-9503-4cfd-8b84-53f63d636461" alt=""><figcaption></figcaption></figure>

The `header` is the topmost part of the BDUK layout system. It is fully modular, with **three alignable sections** (`left`, `center`, and `right`) — you can place any supported component into any section.

***

## Structure

You define a `header` section using the following structure:

```lua
header = {
    layout = {
        left = { justify = "flex-start" },
        center = { justify = "center" },
        right = { justify = "flex-end" },
    },
    elements = {
        left = {
            {
                type = "group",
                items = {
                    { type = "logo", image = "bd_100.png" },
                    { type = "text", title = "BOII", subtitle = "UI Builder" }
                }
            }
        },
        center = {
            { type = "tabs" }
        },
        right = {
            {
                type = "namecard",
                avatar = "avatar_placeholder.jpg",
                background = "namecard_bg_4.jpg",
                name = "Player Name",
                title = "Some Player Title",
                level = 99,
                tier = "bronze"
            }
        }
    }
}
```

Each section (`left`, `center`, `right`) can be **included or omitted**, and you can insert any UI components inside — no limitations.

***

## Supported Elements

You can use any of the following types in **any** of the three header sections:

| `type`     | Description                                                  |
| ---------- | ------------------------------------------------------------ |
| `logo`     | Displays a logo image via background.                        |
| `text`     | Title + optional subtitle, stacked vertically.               |
| `tabs`     | Auto-generated tab navigation from `content.pages`.          |
| `button`   | Single-action button element.                                |
| `buttons`  | Button group using the `Buttons` class.                      |
| `group`    | A horizontal wrapper that nests multiple child elements.     |
| `namecard` | Visual identity block with avatar, name, title, tier, level. |

***

## Alignment Control

Each section's alignment can be styled independently using:

```lua
layout = {
    left = { justify = "flex-start", align = "center", gap = "1vw" },
    ...
}
```

These values map directly to Flexbox properties for layout precision.