App Navigation
In this document, we walk through the complete process of designing and customizing Navigation in Applin Studio.
Follow this guide to fully understand how to activate, style, and manage navigation items inside your app.
Enabling the Navigation Bar
The navigation bar is only available on main-level pages, meaning pages that can act as the primary screen of your application.
These include:
- Main
- Profile
- Listing
- Web
- (and similar main-level pages)
Other page types do not support navigation.
To enable it, simply toggle the field AppNav.Show inside any supported page.
As soon as you turn it ON, the bottom navigation bar becomes visible.
Field Reference
| Field | Type | Default Value | Description |
|---|---|---|---|
| AppNav.Show | Boolean | false | Enables or disables the navigation bar |
Styling the Navigation Bar
The navigation bar offers a full set of styling options.
You can customize its background, shadow depth, corner radius, spacing, and text appearance — even the size of the logo inside each item.
These settings allow you to design a navigation bar that perfectly matches your brand or UI theme.
Styling Fields
| Field | Type | Default Value | Description |
|---|---|---|---|
| Color | Color | {color} | Background color of the navigation bar |
| Elevation | Number | 0 | Shadow/elevation depth |
| Radius | Number | 0 | Border radius of the nav bar container |
| Margin | Number | 20 | Outer margin (all sides) |
| MarginLine | Number | 10 | Bottom spacing between nav bar and screen edge |
| Text.Color | Color | {textColor} | Default text color for all navigation items |
| Text.Size | Number | 16 | Font size of navigation item labels |
| Text.Style | TextStyle | {textStyle} | Font style — e.g. bold, italic, medium, etc. |
| Logo.Size | Number | 32 | Default logo/icon size |
These styles apply globally.
You can still override the style for individual items if needed.
Editing Navigation Items
Navigation consists of multiple items, each representing a destination or action.
To edit any item, simply click on it.
A quick action menu appears, giving you full control over the item:
Navigation Item Controls
- Add Item — Add a new navigation item
- Edit Item — Open the full editor for the item
- Edit Item (Fast) — Quick edit basic properties
- Back to Start — Move item toward the beginning (left or right depending on app direction)
- Send to End — Move item toward the end of the list
- Duplicate Item — Clone the selected item
- Delete Item — Remove the item entirely
This allows you to design and reorder your navigation structure with extreme precision.
Editing a Navigation Item (Full Edit Mode)
In full edit mode, you can configure every property of an item.
This includes its label, icons, hover or active states, colors, styles, and click actions.
Field Reference
| Field | Type | Default Value | Description |
|---|---|---|---|
| Logo | Logo | {logo} | Default icon/logo for the item |
| Logo.Hover | Logo | {logoHover} | Logo shown when item is hovered or active |
| Logo.Size | Number | 32 | Size of the icon in pixels |
| Text | String | {text} | Label displayed under the icon |
| Text.Color | Color | {textColor} | Text color |
| Text.Size | Number | 16 | Font size |
| Text.Style | TextStyle | {textStyle} | Font style (bold, italic, regular, etc.) |
| CurrentPage | PageNumber | {pageName} | Page considered “active” for this item |
| URL | URL | {url} | Destination URL when the item is clicked |
| OnClick | Array |
[] | Extra commands to execute when item is clicked |
This is ideal for creating items that change color when selected, or items that execute automation commands.
Fast Editing (Edit Item — Fast Mode)
If you only want to make quick adjustments, choose Edit Item (Fast).
Fast Mode allows you to modify:
- Logo
- Text
This mode is perfect when you want to update multiple items in a row without opening the full editor.
Changing Item Position
You can reorder navigation items using:
- Send to End
- Back to Start
How movement works:
-
For left-to-right apps:
- Back to Start → moves the item to the left
- Send to End → moves the item to the right
-
For right-to-left apps (e.g. Persian/Arabic):
- The behavior is reversed.
This makes it easy to sculpt your navigation structure item by item.
Duplicate Item
With Duplicate Item, you can instantly clone any navigation item.
This is extremely useful when creating multiple items with similar structure — just duplicate, then slightly adjust the label or icon.
Deleting an Item
To remove an item completely, select Delete Item.
The item is removed immediately and the navigation is updated accordingly.
🔗 Additional Resources
To learn how to develop AppNav using JSON coding, visit:
Develop the AppNav with JSON