How to Add Beautiful Bottom Navigation Bars to Your App

10 Bottom Navigation Styles

Codular comes with 10 pre-built bottom navigation bar styles that you can add with one click.

Available Styles

How to Add

Method 1: From Templates

• Click the 🧩 Templates icon in the left palette
• Filter by Navigation Bars
• Click any style to add it instantly

Method 2: From Components

• Open Navigation category
• Drag Bottom Navigation onto your screen
• In Properties, choose the Style variant

Configuring Tabs

Select the BottomTabs component, then in the Properties panel:

• Add/Remove Tabs - click "+ Add Tab" to add more
• Icon - click "Pick" to choose from 3000+ icons
• Label - the text shown below the icon
• Navigate to Screen - select which screen to show when tapped

Tab Navigation with Flows

For advanced tab behavior:

• Connect the onTabChange event to a flow
• Use the Switch Tab flow node to change tabs programmatically
• Example: auto-switch to Cart tab after adding an item

Design Tips

• Use 3-5 tabs maximum
• Keep labels short (1-2 words)
• Use consistent icon style
• Active color should match your brand
• Dark variants work great for media/entertainment apps

Layout Tips

When you add a BottomTabs to a screen:

• The tabs automatically pin to the bottom
• Content above scrolls independently
• The BottomTabs never scrolls away

Start building at mobcraft.in.