AppNav defines the navigation system of the application. It contains both the style settings for the navigation bar and the list of navigation items. Developers can customize the appearance, layout, and behavior of the navigation through these settings.
| Field | Type | Default Value | Description |
|---|---|---|---|
| Style | AppNavStyle | {} | Style settings for navigation bar |
| Items | Array |
[] | List of navigation items (AppNav Item objects) |
Coding:
{
"AppNav": {
"Style": {},
"Items": []
}
}Specifies the visual and typographic properties of the navigation bar, including background color, elevation, border radius, margins, text appearance, and logo size.
| Field | Type | Default Value | Description |
|---|---|---|---|
| Color | Color | {color} | Background color of the navigation bar |
| Elevation | Number | 0 | Elevation/shadow depth of the nav bar |
| Radius | Number | 0 | Border radius of the nav bar |
| Margin | Number | 20 | Outer margin of the nav bar |
| MarginLine | Number | 10 | Margin from bottom |
| Text.Color | Color | {textColor} | Text color of nav items |
| Text.Size | Number | 16 | Font size of nav item text |
| Text.Style | TextStyle | {textStyle} | Font style of nav item text (e.g., "bold", "italic") |
| Logo.Size | Number | 32 | Logo size in the nav bar |
Coding:
{
"AppNav": {
"Style": {
"Color": "{color}",
"Elevation": 0,
"Radius": 0,
"Margin": 20,
"MarginLine": 10,
"Text.Color": "{textColor}",
"Text.Size": 16,
"Text.Style": "{textStyle}",
"Logo.Size": 32
},
"Items": []
}
}Defines the properties of individual navigation items, including logo and hover icons, text label styling, active page tracking, target URL, and actions triggered on click.
| Field | Type | Default Value | Description |
|---|---|---|---|
| Logo | Logo | {logo} | Icon/logo for the navigation item |
| Logo.Hover | Logo | {logoHover} | Logo icon when hovered |
| Logo.Size | Number | 32 | Logo size in pixels |
| Text | String | {text} | Label text of the navigation item |
| Text.Color | Color | {textColor} | Text color for the label |
| Text.Size | Number | 16 | Font size for the label |
| Text.Style | TextStyle | {textStyle} | Font style for the label (e.g., "bold", "italic") |
| CurrentPage | PageNumber | {pageName} | Page currently active (used for highlighting) |
| URL | URL | {url} | Navigation target URL |
| OnClick | Array |
[] | List of commands triggered when item is clicked |
Coding:
{
"Logo": "{logo}",
"Logo.Hover": "{logoHover}",
"Logo.Size": 32,
"Text": "{text}",
"Text.Color": "{textColor}",
"Text.Size": 16,
"Text.Style": "{textStyle}",
"CurrentPage": "{pageName}",
"URL": "{url}",
"OnClick": []
}To see how to design AppNav in Applin Studio (no-code mode), visit:
Design AppNav in Applin Studio