Chrome DevTools Navigation
A sleek developer-focused navigation bar with a metallic chrome aesthetic and terminal-green accent highlights on a near-black background.
Features
- Main nav links — Dashboard, Projects, Pipelines, Deployments, Settings with Fira Code font
- Command palette — Search trigger with ⌘K keyboard shortcut badge
- Notification bell — Bell icon with green count badge
- User avatar — Profile button with username display
- Breadcrumb trail — Workspace > org > project navigation path
- Git branch badge — Shows current branch with green status dot
- Terminal content — Simulated deployment terminal with blinking cursor
- Metallic border — Chrome/silver gradient border at bottom of nav
- Active indicators — Green pulsing glow on active nav items
Dependencies
@/components/ui/badge — Shadcn Badge@/components/ui/button — Shadcn Button@/components/ui/separator — Shadcn Separator@remixicon/react — Various icons
Customization
- Colors: Adjust the green accent (
green-400) to match your brand
- Nav links: Modify the
navLinks array for different pages
- Breadcrumbs: Update the
breadcrumbs array
- Typography: Uses Fira Code for nav items, Inter Tight for labels
