# Navbar Schema

## Navigation Configuration Schema

{% tabs %}
{% tab title="Column Configuration Syntax" %}
For lowcodera Navbar bar components, we need to develop a navigation configuration schema. Here's the example along with property description.

**Syntax**

```
ClearCollect(
    globalnav,
    {
        type: "DropDown",
        title: "Employee Corner",
        icon: "object-group",
        key: "ec",
        dropDown: [
            {
                type: "Action",
                title: "Log Timesheet",
                key: "logtimesheet"
            },
            {
                type: "Action",
                title: "Apply Leave",
                key: "leave"
            },
            {
                type: "Action",
                title: "My Projects",
                key: "projects"
            }
        ]
    },
    {
        type: "Action",
        icon: "cog",
        key: "settings",
    }
    
)
```

## Description of Schema

<table data-header-hidden><thead><tr><th width="185.01438371097075">Schema</th><th width="202.06111696522657">Description</th><th width="222.01524853562">Accepted Values</th><th data-hidden>Required</th></tr></thead><tbody><tr><td><strong>Attribute</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>type</td><td>Property to configure dropdown or action label for navigation bar</td><td><p>dropdown</p><p>action</p></td><td>Yes</td></tr><tr><td>title</td><td>Property to set label for navigation component</td><td>string</td><td>Yes</td></tr><tr><td>icon</td><td>Property to configure icon name for a navigation label </td><td>string</td><td>Yes</td></tr><tr><td>key</td><td>Property to configure the key for navigation element which can be useful to write onchange event</td><td>string</td><td>Yes</td></tr><tr><td>dropDown</td><td>Property to provide dropdown schema for the navigation</td><td>JSON </td><td>Yes</td></tr></tbody></table>
{% endtab %}
{% endtabs %}