Bottom Navigation Editor
The Bottom Navigation Editor gives you full control over your app’s bottom navigation bar. You can fully customize the design, arrangement, animations, and even a Floating Action Button (FAB).
Overview
Section titled “Overview”The editor is divided into three main areas:
Opening the Editor
Section titled “Opening the Editor”- Open Edit Mode in your app (App Builder Tools)
- Tap on the Bottom Navigation at the bottom of the screen
- The editor opens with a live preview
Editor Interface
Section titled “Editor Interface”Toolbar
Section titled “Toolbar”The toolbar at the top offers the following functions:
| Button | Function |
|---|---|
| Templates | Opens the template gallery with pre-made designs |
| Add Element | Adds a new item or FAB |
| Light/Dark | Switches between Light and Dark Mode for preview |
| Preview | Shows the navigation without editing indicators |
| Reorder | Activates drag & drop to rearrange items |
| Settings | Opens general navigation settings |
| Save | Saves all changes (with dropdown for “Save as Template”) |
Live Preview
Section titled “Live Preview”In the center, you see a live preview of your bottom navigation:
- Tap: Opens the editing panel for the element
- Long press: Shows the context menu with more options
- Drag (in reorder mode): Changes the order of items
Smart Panel
Section titled “Smart Panel”The Smart Panel appears at the bottom of the screen when you select an element. It contains different tabs depending on the selected element:
When you tap on the background of the navigation:
- Style: Colors, gradient, border, effects
- Layout: Height, padding, item alignment, floating mode
- Indicator: Type, position, color, animation
- Behavior: Show/hide animation, selection animation
When you tap on a navigation item:
- Icon & Label: Icon selection, label text, font settings
- Colors: Icon and label colors for active/inactive
- Container: Background, shape, border
- Behavior: Action and target route
When you tap on the FAB:
- Style: Icon, colors, shape, border, elevation
- Position: Alignment, docking, notch, size
- Behavior: Extended FAB, action type, Speed Dial, animation
Managing Elements
Section titled “Managing Elements”Adding Items
Section titled “Adding Items”- Tap Add Element in the toolbar
- Select Navigation Item or Floating Action Button
- The new element appears in the navigation
- Tap on it to edit
Sorting Items
Section titled “Sorting Items”- Activate Reorder Mode in the toolbar
- Press and hold an item and drag it to the desired position
- Release to confirm the new position
- Deactivate reorder mode when finished
Context Menu
Section titled “Context Menu”Long press an element to open the context menu:
| Action | Description |
|---|---|
| Edit | Opens the Smart Panel for the element |
| Add Item After | Adds a new item after this one |
| Duplicate | Creates a copy of the element |
| Delete | Removes the element after confirmation |
Light and Dark Mode
Section titled “Light and Dark Mode”All color settings can be configured separately for Light Mode and Dark Mode:
- Open the editing panel of an element
- Use the Light/Dark Mode Toggle at the top of the panel
- All color settings now show the values for the selected mode
- Change the colors as desired
Using Templates
Section titled “Using Templates”The template gallery offers pre-made designs as a starting point:
- Tap Templates in the toolbar
- Browse available templates by categories
- Tap on a template for a preview
- Confirm with Apply
Available Templates
Section titled “Available Templates”| Template | Description |
|---|---|
| Classic | Traditional Material Design |
| Classic with FAB | Material Design with FAB Notch |
| Material You | Modern design with pill indicator |
| Floating | Floating pill design with border |
| Glassmorphism | Frosted glass with transparency and blur |
| iOS Style | Minimalist with blur effect |
| Bold Gradient | Eye-catching color gradient |
| Minimal Monochrome | Extremely reduced, black/white |
| Vibrant | Colorful with strong animations |
Saving Custom Templates
Section titled “Saving Custom Templates”- Design your navigation as desired
- Tap the arrow next to the Save button
- Select Save as Template
- Enter a name for your template
- The template appears in the template gallery under “Custom”
Saving
Section titled “Saving”Tap Save in the toolbar to save your changes. Changes are immediately saved in the ISAR database and will be available at the next app start.
Frequently Asked Questions
Section titled “Frequently Asked Questions”How many items can I add?
Section titled “How many items can I add?”With a FAB, a maximum of 4 items is possible, without FAB there are 5 items. These limits ensure that the navigation remains easy to use on all screen sizes.
Can I remove the FAB?
Section titled “Can I remove the FAB?”Yes! Long press the FAB and select “Remove FAB” in the context menu. You can add it back at any time via “Add Element”.
Why don’t I see some settings?
Section titled “Why don’t I see some settings?”Some settings only appear under certain conditions:
- Notch: Only when FAB is docked and elevated
- Blur Intensity: Only when glassmorphism is activated
- Label Settings: Only when “Show Label” is activated
- Speed Dial: Only when “Speed Dial” is selected as action type
- Corner Radius for FAB: Only with “Rounded” shape
How does the Dark Mode toggle in the panel work?
Section titled “How does the Dark Mode toggle in the panel work?”The toggle at the top of the panel switches between Light Mode and Dark Mode editing mode. You edit the colors for the respective mode, regardless of which mode the app is currently displaying.
Why is the “Add Element” button disabled?
Section titled “Why is the “Add Element” button disabled?”The maximum number of items has been reached. With FAB, a maximum of 4 items are allowed, without FAB a maximum of 5.
How do I reset all settings?
Section titled “How do I reset all settings?”Apply the “Classic” template to return to default settings.