mobile-fab-navigation

Bottom navigation with FAB combines a fixed navigation bar at the screen base with an expandable floating action button for secondary actions. This Skill provides a production-ready React component that integrates both, handling SSR hydration, glassmorphism styling, and responsive variants so you can customize navigation items and FAB menu actions through configuration.

Yes. This Skill is built for Next.js/React apps and includes hydration-safe rendering to work seamlessly with server-side rendering. It handles SSR state synchronization automatically, so the FAB and bottom nav render consistently on client and server without hydration mismatches.

Mobile navigation accessibility requires semantic HTML and ARIA roles on interactive elements. This Skill applies ARIA roles to bottom nav and FAB menu items, ensuring screen readers announce navigation structure and menu state changes, making expandable actions discoverable for assistive technology users.

Glassmorphism styling uses semi-transparent backgrounds, blur effects, and light borders to create a frosted-glass aesthetic. This Skill includes built-in glassmorphism theming for the bottom nav and FAB, with customizable color themes and responsive size variants (compact, standard, large).

Yes. This Skill uses pattern-driven configuration through navItems and fabMenuItems arrays, letting you define labels, icons, actions, and active states declaratively. Changes propagate automatically with smooth animations and active state indicators updating without manual state management.

Yes. This Skill provides responsive size variants and handles responsive rendering natively. The fixed bottom bar and FAB adapt layout and spacing across compact, standard, and large viewports, ensuring the navigation remains functional and visually balanced on all mobile devices.