Chrome Developer Navigation
An industrial, terminal-themed navigation bar designed for developer tool platforms.
Features
- Chrome silver (#C0C0C0) on pure black (#0D0D0D) dark mode aesthetic
- Light mode: white background with dark text and subtle gray borders
- Monospace-styled logo and headings for terminal feel
- 5 navigation links: Docs, API, Pricing, Blog, Changelog
- Search input with ⌘K keyboard shortcut indicator
- Animated green (#4ADE80) online status indicator dot
- Sign In (outline) and Get Started (filled) action buttons
- Fully responsive with hamburger mobile menu
- Sticky header with backdrop blur
- Hero section placeholder below nav
- WCAG AA compliant color contrast
Usage
import RegistryItem from './registry-item';
export default function Page() {
return <RegistryItem />;
}
Customization
- Edit
navLinks array to modify navigation items
- Replace logo icon and brand name
- Adjust chrome/silver color values
- Add dropdown menus to nav items
- Connect search input to your search backend
- Wire up Sign In / Get Started buttons to auth flow
