Overlays mobilenavigationoverlay

Mobile Menu Overlay

Full-screen mobile drawer triggered by burger menu.

×
Home Features Pricing Team

Usage

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

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

<MobileNavOverlay>Content</MobileNavOverlay>
--- import { MobileMenuOverlay } from 'astro-component-kit'; --- <MobileNavOverlay>Content</MobileNavOverlay>

Manual Installation

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

astro 
---
---
<div class="mob-nav">
  <div class="mob-close">×</div>
  <nav class="mob-links">
    <a href="#">Home</a>
    <a href="#">Features</a>
    <a href="#">Pricing</a>
    <a href="#">Team</a>
  </nav>
</div>
<style>
  .mob-nav { position: fixed; inset: 0; background: #080b14; z-index: 4000; padding: 4rem 2rem; display: flex; flex-direction: column; }
  .mob-close { font-size: 3rem; color: #fff; align-self: flex-end; cursor: pointer; margin-bottom: 2rem; }
  .mob-links { display: flex; flex-direction: column; gap: 1.5rem; }
  .mob-links a { font-size: 2.2rem; font-weight: 800; color: #fff; text-decoration: none; transition: 0.2s; }
  .mob-links a:hover { color: #6366f1; padding-left: 10px; }
</style>
--- --- <div class="mob-nav"> <div class="mob-close">×</div> <nav class="mob-links"> <a href="#">Home</a> <a href="#">Features</a> <a href="#">Pricing</a> <a href="#">Team</a> </nav> </div> <style> .mob-nav { position: fixed; inset: 0; background: #080b14; z-index: 4000; padding: 4rem 2rem; display: flex; flex-direction: column; } .mob-close { font-size: 3rem; color: #fff; align-self: flex-end; cursor: pointer; margin-bottom: 2rem; } .mob-links { display: flex; flex-direction: column; gap: 1.5rem; } .mob-links a { font-size: 2.2rem; font-weight: 800; color: #fff; text-decoration: none; transition: 0.2s; } .mob-links a:hover { color: #6366f1; padding-left: 10px; } </style>

Quick Info

Category
Overlays
Filename
MobileMenuOverlay.astro
Dependencies
None — pure Astro + CSS
Tags
mobilenavigationoverlay