Mobile Navigation Bar
Last updated
Last updated
The Mobile Navigation Bar is a fixed horizontal bar at the bottom of the screen (visible only on mobile). It mimics the bottom nav found in most apps, making your store feel more modern, intuitive, and easy to use with thumbs.
Toggles the entire bar on or off for mobile. If disabled, no nav bar appears.
Adds a small Home icon linking to your homepage.
Adds a shop or product icon, usually linking to a collection or “Shop All” page.
Adds a profile/user icon linking to login or account dashboard.
Adds a cart icon showing the number of items and linking to the cart page.
Adds a heart icon linking to saved items (works only if your theme or app supports wishlisting).
💡 Tip: You can choose to show only 3–4 icons to keep the bar uncluttered.
Lets you manually set a background color for the bar.
Mobile Navigation Bar Color: #FFFFFF
This will apply if gradient and glassmorphism are turned off.
Turns on a multicolor gradient background. This overrides the solid color setting if both are enabled.
Gradient Color 1: #F4F4F4
Gradient Color 2: #E7E7E7
Gradient Color 3: #FFFFFF
Gradient Angle: 50°
Controls the angle or direction the gradient flows (0° = horizontal left to right, 90° = top to bottom).
Gradients give the bar a more dynamic or branded look, especially when paired with minimalist icons.
Activates a stylish, semi-transparent frosted glass look behind the navigation bar.
Useful for showing background imagery while maintaining readability and modern aesthetics.
Glassmorphism Settings:
Blur (px): 18 – The intensity of the blur applied to background content.
Opacity: 1 – 100% opaque (use lower values for more transparency).
Background Color: Transparent – Defines the base tint behind the frosted effect.
Saturation (%): 100 – Controls how vivid background colors remain.
Brightness (%): 120 – Increases brightness for a glossier look.
🧊 Glassmorphism looks great over content-heavy pages or image-based layouts. If paired with icons in dark colors, keep the bar light for good contrast.
The Mobile Navigation Bar is one of the most important UI tools on mobile. It gives quick access to high-converting actions (like Cart, Wishlist, Account), and enhances mobile usability drastically.
Keep it clean with only 3–4 icons max.
Stick to light or slightly transparent backgrounds for readability.
Use glassmorphism or gradients for visual polish, especially if your site already feels modern.
