Garnet Ecommerce Navigation
Garnet Ecommerce Navigation
A luxury ecommerce navigation with mega menu and hero section for high-end retail brands.
Features
- Top bar — Shipping promotion and utility links (Store Locator, Contact)
- Main navigation — Logo with tagline, horizontal menu links, icon actions
- Mega menu — Dropdown with collections and categories in two-column layout
- Gold accent lines — Gradient border decorations for luxury feel
- Hover animations — Elegant CSS underline animations on nav links
- Cart badge — Item count indicator on shopping bag icon
- Wishlist badge — Heart icon with count overlay
- Hero section — Full-width hero with seasonal messaging and CTAs
- Value props — Three-column cards for artisan, ethical, and guarantee messaging
- Bodoni Moda — Serif font for brand identity and headings
- Montserrat — Sans-serif for navigation items and body text
- Dark mode — Rich dark (#120a0a) with warm gold/copper accents
- Pattern overlay — Subtle decorative cross pattern on hero area
Dependencies
@/components/vue-ui/button — Button@/components/vue-ui/badge — Badge@/components/vue-ui/separator — Separator@/components/vue-ui/avatar — Avatar, AvatarFallback@/components/vue-ui/card — Cardlucide-vue-next — Search, ShoppingBag, Heart, Menu, ChevronDown, User
Customization
- Brand: Replace GARNET logo text and tagline
collections array for your product linesCategories: Update the categories array with your product taxonomyColors: Adjust gold (#b08968) and ruby accents to match your brandHero: Update seasonal messaging and CTA button labelsMore from Stow
Explore other blocks from this seller
