A clean bottom navigation bar with a soft, rounded pill highlight for the active tab. Icons and labels stay readable, while the selected item (“Tickets”) pops with an elevated capsule background. Ideal for media, travel, finance, and marketplace apps.
Functionality
-
4 tabs (Home, Tickets, Wallet, Profile) with icon + label.
-
Active pill highlight with accent color and subtle elevation.
-
Animated selection (fade/scale) for smooth state changes.
-
State persistence so the last tab restores on reopen.
-
Badge-ready (counts/dots) for notifications on any tab.
-
Safe-area aware; supports translucent system bars.
-
Haptics & ripple feedback on tab press (optional).
-
Theming: icon/label colors, pill radius, shadows, typography.
-
RTL & localization support for labels and semantics.
-
Accessibility: large hit targets and proper tab roles for screen readers.
Keywords: bottom navigation, bottom nav bar, tab bar, pill highlight, active tab, nav icons, labels, badges, notifications, material navigation, cupertino tabbar, mobile navbar, route navigation, go_router, auto_route, page transitions, ripple effect, haptic feedback, safe area, elevation, rounded capsule, accent color, theming, dark mode, light mode, accessibility, screen reader, RTL support, adaptive layout, iOS, Android, Flutter widget, FlutterFlow component, app shell, persistent navigation.
Bottom Navigation Bar, Navbar
- Fixed price & scope
- Pixel-perfect UI/UX
- App Store & Google Play submission
You may only use this template for one project. For more details, please read the Marketplace Terms of Service.