# Navigation
You can define a navigation object in the site settings. This allows you to create dropdown drop down menus and their children.
### Navigation Object
The navigation is defined in the **Appearance > Navigation** tab of your [site settings](/v1/reference/site-settings.md). It should be an array of objects, with each object defining a section of the navigation. Most apps may only have 1 navigation section.
| Key | Type | Description |
| -------------: | :------: | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| `sectionLabel` | *string* | This label describes what the menu section context is. It is not selectable. |
| `subs` | *array* | This is a dropdown style parent menu that will hold sub menus. BetterForms looks to see a `subs` key and if present will consider this the parent. |
### Subs Array
At the base of the navigation menu section, the subs array of objects should contain your list of menu items. Further `subs` keys beyond here will create sub-menus.
| Key | Type | Description |
| --------: | :-------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `label` | *string* | This label is the text area of each menu item |
| `subs` | *array* | This is a dropdown style parent menu that will hold sub menus. BetterForms looks to see a `subs` key and if present will consider this the parent. |
| `path` | *string* | navigational sub path e.g.: /forms/123 Use this to gain direct access to another part of your app. Alternatively, you can use a [path action](/v1/reference/actions-processor/actions_overview/path.md). |
| `actions` | *array* | If a navigation item has an `actions` key then it is considered an actions type. The actions\[ ] array can contain several actions that are chained together and passed to the [actions processor](/v1/reference/actions-processor.md). |
| `visible` | *boolean* | *{optional}* Controls if item is visible. This key will also accept a `visible_calc` function for conditional visibility, but the scope of the function is bound to the entire site instead of a specific page. |
| | | |
| `html` | *string* | If key present, then the HTML value is inserted as the navigation menu item |
### Element Type Order
The navigation parser classifies the navigation elements in the following hierarchy:
* `actions` if key present, item treated as action trigger only
* `path` if path key present, item handled as regular router link
* `subs` If key present , item hand as a sub menu
* `html` If key present, item is handled as html
## Examples
{% tabs %}
{% tab title="Simple" %}
```yaml
// Full Navigation example
[
{
"sectionLabel": "Menu",
"subs": [
{
"label": "Home",
"icon": "fa fa-home",
"path": "/dash"
},
{
"label": "Some Form",
"icon": "fa fa-check-square-o",
"path": "/form/123-12-312-3123"
},
{
"label": "A Dropdown Menu",
"icon": "fa fa-car",
"subs": [
{
"icon": "fa fa-car",
"label": "Some Form",
"path": "/dash"
},
{
"icon": "fa fa-fw fa-play",
"label": "Show Alert",
"actions": [
{
"action": "showAlert",
"options": {
"title": "Hello World!",
"text": "This is the Alert body, you will take to the dash",
"type": "success"
}
}
]
},
{
"icon": "fa fa-fw fa-list-ol",
"label": "Show Modal",
"actions": [
{
"action": "showModal",
"options": {
"body": "This model has a second action, you willl be taken to the /dash",
"icon": "success",
"options": {},
"overlayTheme": "dark",
"text": "This is a Modal"
}
},
{
"action": "path",
"options": {
"path": "/dash"
}
}
]
}
]
}
]
}
]
```
{% endtab %}
{% tab title="Conditionally Hide Nav Items" %}
In the same way that `visible_calc` works for fields, you can also apply to individual items or entire sections of the nav menu. Be aware that from the context of the nav menu, you don't have access to the data model of the page, and may need to reference site-global variables as set in the *Environment > App Model* section of your site settings.
{% endtab %}
{% tab title="HTML" %}
Using an HTML nav item, you can add badges
```yaml
[
{
"sectionLabel": "Menu",
"subs": [
{
"exact": true,
"icon": "fa fa-home",
"label": "Home",
"path": "/"
},
{
"html": "\n Payments\n overdue\n"
}
]
}
]
```
{% endtab %}
{% endtabs %}
---
# 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.klai.studio/v1/reference/site-settings/navigationoverview.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.