Navigation mega menudropdownnavigation

Mega Menu Layout

Multi-column dropdown menu for large navigation systems.

Products
Analytics CRM Support
Resources
Documentation Tutorials Guides

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { MegaMenuLayout } from 'astro-component-kit';
---

<MegaMenuGlass>Content</MegaMenuGlass>
--- import { MegaMenuLayout } from 'astro-component-kit'; --- <MegaMenuGlass>Content</MegaMenuGlass>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/MegaMenuLayout.astro and paste the following code:

astro 
---
---
<div class="mega-wrap">
  <div class="mega-grid">
    <div class="mega-col">
      <h5>Products</h5>
      <a href="#">Analytics</a>
      <a href="#">CRM</a>
      <a href="#">Support</a>
    </div>
    <div class="mega-col">
      <h5>Resources</h5>
      <a href="#">Documentation</a>
      <a href="#">Tutorials</a>
      <a href="#">Guides</a>
    </div>
  </div>
</div>
<style>
  .mega-wrap { background: rgba(10, 10, 20, 0.9); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 2rem; width: 600px; }
  .mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
  h5 { color: #818cf8; font-size: 0.8rem; margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
  .mega-col a { display: block; padding: 0.5rem 0; color: #e2e8f0; text-decoration: none; font-size: 0.9rem; }
  .mega-col a:hover { color: #fff; }
</style>
--- --- <div class="mega-wrap"> <div class="mega-grid"> <div class="mega-col"> <h5>Products</h5> <a href="#">Analytics</a> <a href="#">CRM</a> <a href="#">Support</a> </div> <div class="mega-col"> <h5>Resources</h5> <a href="#">Documentation</a> <a href="#">Tutorials</a> <a href="#">Guides</a> </div> </div> </div> <style> .mega-wrap { background: rgba(10, 10, 20, 0.9); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 2rem; width: 600px; } .mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } h5 { color: #818cf8; font-size: 0.8rem; margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.05em; } .mega-col a { display: block; padding: 0.5rem 0; color: #e2e8f0; text-decoration: none; font-size: 0.9rem; } .mega-col a:hover { color: #fff; } </style>

Quick Info

Category
Navigation
Filename
MegaMenuLayout.astro
Dependencies
None — pure Astro + CSS
Tags
mega menudropdownnavigation