1 GitHub star = 1 new component.

Star the repo
Overlaysmobilenavigationoverlay

Mobile Menu Overlay

Full-screen mobile navigation menu overlay.

ร—
HomeFeaturesPricingTeam

Usage

Copy and paste this code into your React component:

tsx
import { MobileNavOverlay } from 'react-component-kit-ui/overlays';

<MobileNavOverlay>Content</MobileNavOverlay>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/MobileNavOverlay.tsx + MobileNavOverlay.css:

MobileNavOverlay.tsx
'use client';

import './MobileNavOverlay.css';

/** MobileNavOverlay โ€” ported from astro-component-kit. */
export interface MobileNavOverlayProps {
}

export function MobileNavOverlay({}: MobileNavOverlayProps) {
  return (
    <>
      <div className="mob-nav" data-rk-69811e="">
        <div className="mob-close" data-rk-69811e="">ร—</div>
        <nav className="mob-links" data-rk-69811e="">
          <a href="#" data-rk-69811e="">Home</a>
          <a href="#" data-rk-69811e="">Features</a>
          <a href="#" data-rk-69811e="">Pricing</a>
          <a href="#" data-rk-69811e="">Team</a>
        </nav>
      </div>
    </>
  );
}

export default MobileNavOverlay;
MobileNavOverlay.css
/* MobileNavOverlay โ€” ported from astro-component-kit (overlays/MobileNavOverlay.astro) */

.mob-nav:where([data-rk-69811e]) { position: fixed; inset: 0; background: #080b14; z-index: 4000; padding: 4rem 2rem; display: flex; flex-direction: column; }
.mob-close:where([data-rk-69811e]) { font-size: 3rem; color: #fff; align-self: flex-end; cursor: pointer; margin-bottom: 2rem; }
.mob-links:where([data-rk-69811e]) { display: flex; flex-direction: column; gap: 1.5rem; }
.mob-links:where([data-rk-69811e]) a:where([data-rk-69811e]) { font-size: 2.2rem; font-weight: 800; color: #fff; text-decoration: none; transition: 0.2s; }
.mob-links:where([data-rk-69811e]) a:hover:where([data-rk-69811e]) { color: #6366f1; padding-left: 10px; }

Quick Info

Category
Overlays
Filename
MobileNavOverlay.tsx
Dependencies
None โ€” pure React + CSS
Tags
mobilenavigationoverlay