> For the complete documentation index, see [llms.txt](https://zsx-development.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zsx-development.gitbook.io/docs/resources/user-interface-v2/configurating/handling-ui/pause-menu/creating-custom-navbar.md).

# Creating custom navbar

## Adding

Head over to `/shared/ui_cfg/config_pausemenu.lua` file and find:

```lua
Config.PauseMenu.Buttons = {
    ['ui'] = {
        name = 'ui',
        path = {
            type = 'UISettings',
        },
        icon = 'UI',
    },
    ['settings'] = {
        name = 'settings',
        path = {
            type = 'game',
            value = 'settings',
        },
        icon = 'fas fa-cog',
    },
    ['map'] = {
        name = 'map',
        path = {
            type = 'game',
            value = 'map',
        },
        icon = 'fas fa-map',
    },
}
```

In that example, we will add Logout action for our Multicharacter.

```lua
['logout'] = { -- Unique key
    name = 'logout', -- Unique name as the key
    path = {
        type = 'custom_payload', -- Do not change that!
        export = {
            resource = 'ZSX_Multicharacter',
            exportFunction = 'Logout',
            params = {}
        },
    },
    icon = 'fas fa-times',
},
```

## Path object explained

Path is the object that determines payload which will be executed after user interaction.<br>

<table><thead><tr><th width="186">key</th><th>Information</th></tr></thead><tbody><tr><td>type</td><td>This should always be <strong>'custom_payload'</strong></td></tr><tr><td>export</td><td>Object revised beneath</td></tr><tr><td>icon</td><td>Icon<br>List available <a href="https://fontawesome.com/v5/search?q=">here</a>.</td></tr></tbody></table>

### Export object explained

There's 2 options to use it properly. There's an **export** object which obviously is only client-sided. You can use it for any kind of interaction you'd like to.\
Other is event, which needs to be determined whether it's client sided or server sided.\
Also, take a note that you can parse params, but there's a catch. Do not use it as an object since we unpack the table!<br>

#### Export object

<table><thead><tr><th width="214">key</th><th>Information</th></tr></thead><tbody><tr><td>resource</td><td>Determines parent resource of the selected export</td></tr><tr><td>exportFunction</td><td>Exported function name</td></tr><tr><td>params</td><td>Arguments of the function</td></tr></tbody></table>

#### Event object

<table><thead><tr><th width="214">key</th><th>Information</th></tr></thead><tbody><tr><td>type</td><td>Determines if it's client or server side event</td></tr><tr><td>name</td><td>Registered event name</td></tr><tr><td>params</td><td>Arguments of the event</td></tr></tbody></table>

## Examples

### Export

```lua
['logout'] = { -- Unique key
    name = 'logout', -- Unique name as the key
    path = {
        type = 'custom_payload', -- Do not change that!
        export = {
            resource = 'ZSX_Multicharacter',
            exportFunction = 'Logout',
            params = {}
        },
    },
    icon = 'fas fa-times',
},
```

### Event

```lua
['logout'] = { -- Unique key
    name = 'logout', -- Unique name as the key
    path = {
        type = 'custom_payload', -- Do not change that!
        event = {
            type = 'client',
            name = 'ZSX_Multicharacter:Event:Logout',
            params = {},
        },
    },
    icon = 'fas fa-times',
},
```