Granite DevTools Navigation
A terminal-inspired navigation block built for developer tools and SaaS platforms.
Features
- Top announcement bar — Status indicator and quick links
- Sticky main nav — Logo, nav links with dropdowns, search input, sign in/CTA buttons
- Mobile sheet menu — Responsive hamburger with full navigation tree
- Terminal hero — Code-inspired hero section with animated cursor
- Features grid — 4-column feature cards with hover effects
- Keyboard shortcut — ⌘K search hint
Dependencies
@/components/vue-ui/button — Shadcn-Vue Button@/components/vue-ui/input — Shadcn-Vue Input@/components/vue-ui/badge — Shadcn-Vue Badge@/components/vue-ui/separator — Shadcn-Vue Separator@/components/vue-ui/sheet — Shadcn-Vue Sheet for mobile menu
Customization
- Colors: Replace green-400/green-500 with your brand accent
- Nav links: Edit the
navLinks array for your product pages
- Features: Update the
features array with your product capabilities
- Terminal commands: Replace
commandExamples with your CLI examples
