[Paid] BottomNav Extension: Customizable Bottom Navigation Bar with Material Icon & SVG

extension Extension #4

BottomNav Extension: Customizable Bottom Navigation Bar with SVG Support and Animations

Create modern, customizable bottom navigation bars with three styles, SVG icons, and dynamic animations for professional app navigation.

calendar_today Released: September 20, 2025

attach_money Price: $5 USD or INR 500/-

storage Size: ~33 KB

BottomNav is a premium Kodular/MIT App Inventor extension designed to create a modern, customizable bottom navigation bar with support for up to 6 tabs. It offers three navigation styles (Default, Curved, Google), SVG icon integration, dynamic animations, and extensive customization options. Perfect for enhancing app navigation with a sleek and professional look.

menu_book View Documentation

featured_play_list Key Features

navigation 3 Navigation Styles

Default, Curved, and Google-inspired designs for varied aesthetics with smooth animations

image SVG Icon Support

Use scalable vector graphics for high-quality icons with optional original color retention

palette Extensive Customization

Custom colors, fonts, Google-style pill effects, corner radius, and display modes

animation Dynamic Animations

Choose from Default, Curved, or Google animations for smooth tab transitions

touch_app Event Handling

TabClicked and SvgPathClicked events for interactive navigation and advanced interactions

view_week 6 Tabs Support

Configure up to 6 tabs with individual SVG icons and text labels in three display modes

code How to Use

add_box Add to Project

Import the .aix file via Kodular's Extensions tab and drag the BottomNav component into your screen

view_agenda Initialize Layout

Use InitializeInLayout block with parent layout (HorizontalArrangement) to set up navigation bar

tune Configure Tabs

Set Tab1SvgIcon to Tab6SvgIcon and Tab1Text to Tab6Text for each navigation item

style Set Styles & Modes

Configure NavigationStyle, DisplayMode, colors, and Google pill properties for desired appearance

smart_button Blocks Preview

BottomNav extension blocks for configuration and event handling

play_circle Demo Video

Watch BottomNav in action with all three navigation styles and customization options demonstrated

play_arrow Watch on YouTube

paid Purchase Information

attach_money BottomNav v1

Price: $5 USD or INR 500/-

Includes: Lifetime access to the extension

File: BottomNav.aix (32.7 KB)

shopping_cart How to Purchase

telegram Contact on Telegram email Send DM

Username & password provided upon purchase for file access

get_app Installation Guide

extension Step 1: Import Extension

Import the .aix file via Kodular's Extensions tab in your project

add_circle Step 2: Add Component

Drag the BottomNav component into your screen from the palette

vpn_key Step 3: Authentication

Provide username & password received upon purchase for activation

view_agenda Step 4: Initialize

Use InitializeInLayout block with parent layout to set up navigation

apps Use Cases

home App Navigation

Create intuitive navigation for multi-screen apps (Home, Profile, Settings, etc.)

design_services Modern UI

Enhance apps with Google-style pill effects or curved designs for contemporary look

interests Interactive Apps

Use SVG path clicks for advanced interactions and micro-interactions within tabs

palette Themed Interfaces

Customize colors and fonts to match your app's branding and design system

Feedback: Try BottomNav and share your feedback or suggestions below! Your support fuels the development of more premium extensions.

Changelog

v1 (Sep 2025): Initial release with support for 3 navigation styles (Default, Curved, Google), 3 display modes (Icon Only, Text Only, Both), SVG icon support, customizable colors, animations, Google pill effects, custom font import, and events (TabClicked, SvgPathClicked). Includes blocks for initialization, dynamic color updates, and tab configuration.

Secure Bugs