A premium bottom navigation bar with a floating, glass-like capsule, readable labels, and a clean spotlight ring on the active tab. With 45 parameters, it adapts to storefronts, dashboards, and social apps while feeling perfectly native on iOS and Android.
Functionality
-
Floating capsule container with adjustable corner radius, elevation, and soft shadow.
-
Active spotlight ring around the selected icon (size, stroke, color, animation speed).
-
Icon + label layout with per-tab icon, title, and active/inactive color styles.
-
Animated tab changes (fade/scale/slide) with custom durations and easing.
-
Badges (dot or count) for notifications on any tab.
-
Initial index & state persistence so the last tab is restored on reopen.
-
Hide-on-scroll / auto-reveal behavior for immersive content screens.
-
Safe-area aware and notch/gesture compatible; optional background blur.
-
Haptics & ripple feedback on selection; long-press tooltips (optional).
-
Routing-ready: bind
onTap
togo_router
,auto_route
, or custom flows. -
Accessibility & RTL: large touch targets, semantic roles, high-contrast states, localization.
Keywords: bottom navigation, bottom nav bar, capsule bar, glassmorphism, floating bar, spotlight ring, active indicator, icon label, badges, notification dot, elevation, shadow, corner radius, safe area, notch support, gesture insets, animate on tab change, easing, duration, routing, go_router, auto_route, state persistence, hide on scroll, haptic feedback, ripple effect, dark mode, light mode, RTL, localization, accessibility, Material 3, Cupertino, iOS, Android, Flutter widget, FlutterFlow component, app shell, modern UI, ecommerce navigation, dashboard navigation.
Bottom Navigation Bar V7
- 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.