Module: Navigation Manager Audience: Store admins Last updated: March 2026
Overview
The Navigation Manager gives you full control over the look and feel of your bottom navigation bar. Choose custom SVG icons or pick from a built-in library, then style the bar with colors, typography, borders, and custom CSS.
Icons
Using the Default Icon Library
Click a navigation item in the preview to select it.
In the item settings, find the Icon section and click Default Icon dropdown.
Select an icon.
The Default icon dropdown includes common navigation icons: home, shopping bag, heart, user, grid, search, and more.
Uploading a Custom SVG Icon
Select the navigation item in the preview.
In the Icon section, click Choose from Library, then Upload Images to upload your Custom Icon (SVG).
Custom SVG guidelines:
Use single-color SVGs so the active/inactive color system applies correctly.
Keep SVGs simple and recognizable at small sizes (around 24x24 pixels).
Avoid embedded raster images inside SVGs.
Global Styling
Click the bar background in the phone preview (not an individual item) to open global styling settings.
Colors
Background color: The bar's background fill.
Active icon/text color: Applied to the currently selected item.
Inactive icon/text color: Applied to unselected items.
Typography
Configure font family, font size, and font weight for the item labels.
Borders and Padding
Add a top border (with configurable color and thickness) and adjust padding for the bar's internal spacing.
Custom CSS
For advanced styling, use the Custom CSS field to write CSS rules applied directly to the navigation bar. Use this for shadows, gradients, rounded corners, or effects not covered by standard controls.
Tips
Stick to a two-color scheme (active vs. inactive) for icons and labels to keep the bar clean.
Test custom SVG icons on both light and dark backgrounds if your app supports dark mode.
Use Custom CSS sparingly - the built-in controls cover most needs.
FAQ
What SVG format works best? Single-path, single-color SVGs at 24x24 pixels. Remove fill colors so the color system works correctly.
Can I set different styles per item? Icons are per item, but colors and typography are global to ensure visual consistency.
Will custom CSS override the built-in settings? Yes. Custom CSS takes precedence, so be careful not to accidentally override UI-configured settings.