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.