Meet the wave notch bottom navigation bar: a stylish, floating capsule with a curved โwaveโ notch that docks a centered circular hub ๐. The active tab pops with a vivid accent (e.g., Home), while the center hub hovers for a featured destination or action (e.g., Store) โ perfect for e-commerce, marketplaces, and lifestyle apps. โจ
Functionality โ๏ธ
-
๐ Curved wave notch that docks a center hub (icon or action).
-
๐งญ 4โ5 tabs with icon + optional label; vivid active accent & dimmed inactives.
-
๐ซง Animated elevation & shadow on the center hub for soft, tactile depth.
-
๐ Badges (counts/dots) on any tab.
-
๐ถ๏ธ Hide-on-scroll / auto-reveal behaviors (optional).
-
๐จ Theming: colors, gradients, corner radii, blur, icon sizes/weights.
-
๐งฉ Icon sources: vector/SVG, Lottie, or font icons.
-
๐งท Safe-area aware; plays nicely 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 to restore the last selected tab on reopen.
-
๐ Analytics hooks to log tab impressions and selections.
Use it when: you want a standout, center-docked action and a premium, floating nav feel that looks native on iOS & Android. The wave notch bottom navigation bar keeps content first while guiding users with delightful micro-interactions. ๐
Keywords: bottom navigation, bottom nav bar, wave notch bottom navigation bar, curved 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, flutter widget, flutterflow component, modern ui.
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.