Sterling Nav Bar
A premium fintech navigation component with meticulous attention to detail.
Features
- Full-width sticky navigation bar with subtle backdrop blur
- Logo with PRO badge indicator
- 5 navigation links with active state highlighting and badge counts
- Expandable search bar with smooth toggle animation
- Notification bell with unread indicator dot
- User avatar dropdown with profile info, settings, security, help, and sign-out options
- Responsive mobile hamburger menu with full nav links and search
- Placeholder dashboard cards showing financial overview (Total Balance, Income, Expenses, Savings)
- Dark mode: dark slate (#0F172A) background with steel gray nav
- Libre Franklin Google Font for banking-precision typography
- WCAG AA compliant contrast ratios
Dependencies
lucide-react for icons- Shadcn UI: Button, Badge, Separator, Input
Customization
- Replace navLinks array with your application routes
- Swap user info (name, email, initials) with real auth data
- Connect dropdown actions to your router/auth handlers
- Adjust color scheme by modifying slate Tailwind classes
- Add real notification data and count
