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 Built-In Icon Library
Click a navigation item in the preview to select it.
In the item settings, find the Icon section and click Choose from Library.
Browse or search the icon library and select an icon.
The library includes common navigation icons: home, shopping bag, heart, user, grid, search, and more.
[Screenshot: Icon library modal with searchable grid of available icons]
Uploading a Custom SVG Icon
Select the navigation item in the preview.
In the Icon section, click Upload SVG and select an SVG file.
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.
[Screenshot: Custom SVG icon uploaded and displayed in the navigation bar preview]
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.
[Screenshot: Color settings panel with background, active, and inactive color pickers]
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.
[Screenshot: Custom CSS field with example styling rules]
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.
Related Articles