A stylish bottom navigation bar with a curved “wave” notch that docks a centered circular hub. The active tab gets a vivid accent (e.g., Home), while the center hub floats above for a featured destination or action (Store). Perfect for e-commerce, marketplaces, and lifestyle apps where the middle tab should stand out.
Functionality
-
Curved wave notch that docks a center hub (icon or action).
-
4–5 tabs with icon + optional label; active tab accent & dimmed inactives.
-
Animated elevation & shadow on the center hub for depth.
-
Badge support (counts/dots) on any tab.
-
Hide-on-scroll and auto-reveal behaviors (optional).
-
Theming: colors, gradients, corner radii, blur, and icon size/weights.
-
Icon sources: vector/SVG, Lottie, or font icons.
-
Safe-area aware; works with translucent system bars.
-
Haptics & ripple feedback on press (optional).
-
Accessibility: large hit targets, semantic roles, high-contrast states.
-
Localization & RTL ready; adaptive labels (show/hide) for compact layouts.
-
State persistence—restore last selected tab on app reopen.
-
Analytics hooks to log tab impressions and selections.
Keywords: bottom navigation, bottom nav bar, curved notch, wave notch, convex app bar, center dock, floating hub, FAB dock, active tab highlight, icon label, badges, notification dot, route navigation, go_router, auto_route, page transitions, PageView sync, hide on scroll, translucent bar, elevation shadow, Material 3, Cupertino style, Lottie icons, SVG icons, theming, gradient background, blur effect, haptic feedback, ripple effect, safe area, accessibility, screen reader, RTL support, adaptive layout, iOS, Android, e-commerce app, marketplace navigation, modern UI, Flutter widget, FlutterFlow component.
Bottom Navigation Bar V2
- 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.