Charcoal Logistics Navigation
An industrial-styled top navigation system for logistics and fleet management platforms.
Features
- Primary navigation — 5 links with active indicator underline
- Expandable search — Click-to-expand search bar with close button
- Notification bell — Badge with unread count
- User avatar — Initials with hover ring
- Breadcrumb bar — Secondary navigation below main nav
- Mobile responsive — Hamburger menu with full nav + search
- Quick stats — 4 stat cards below nav to fill the page context
- Amber accents — Electric amber on charcoal/steel gray
- Full dark mode — Near-black background with zinc palette
Dependencies
@/components/vue-ui/badge — Notification count@/components/vue-ui/button — Nav action buttons@/components/vue-ui/separator — Visual dividerslucide-vue-next — Search, Bell, ChevronRight, Truck, and more
Customization
- Nav items: Edit the
navItems array to change navigation links
- Breadcrumbs: Modify the
breadcrumbs array for different paths
- Accent color: Swap amber-500 for another accent color
- Logo: Replace the Truck icon and NEXUSFREIGHT text
