MobileMenu

mobilemenu-1779394025672.tsx

'use client'
import { useState } from 'react'

const LINKS = ['Home','Features','Pricing','Docs','Blog','Contact']

export default function MobileMenu() {
  const [open, setOpen] = useState(false)
  return (
    <div style={{ position:'relative' }}>
      <button onClick={() => setOpen(!open)} style={{
        background:'#1e1e2e', border:'none', borderRadius:'10px',
        padding:'10px 12px', cursor:'pointer', display:'flex', flexDirection:'column',
        gap:'5px', alignItems:'center', justifyContent:'center',
      }}>
        {[0,1,2].map(i => (
          <div key={i} style={{
            width:'22px', height:'2px', background:'#fff', borderRadius:'1px',
            transition:'all 0.3s',
            transform:open && i===0 ? 'translateY(7px) rotate(45deg)' : open && i===2 ? 'translateY(-7px) rotate(-45deg)' : open && i===1 ? 'scaleX(0)' : 'none',
          }} />
        ))}
      </button>
      {open && (
        <>
          <div onClick={() => setOpen(false)} style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.4)', zIndex:40 }} />
          <div style={{
            position:'absolute', top:'calc(100% + 8px)', left:0, zIndex:50,
            background:'#1e1e2e', borderRadius:'16px', padding:'12px',
            minWidth:'200px', boxShadow:'0 20px 60px rgba(0,0,0,0.4)',
            animation:'slideDown 0.2s ease',
          }}>
            <style>{'@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}'}</style>
            {LINKS.map(link => (
              <a key={link} href="#" style={{
                display:'block', padding:'11px 16px', color:'#e2e8f0', fontSize:'15px',
                fontWeight:500, textDecoration:'none', borderRadius:'10px', transition:'background 0.15s',
              }}
                onMouseEnter={e => e.currentTarget.style.background='#2d2d3d'}
                onMouseLeave={e => e.currentTarget.style.background='transparent'}
              >{link}</a>
            ))}
          </div>
        </>
      )}
    </div>
  )
}

Component info

CategoryNavigation

Frameworkreact

TierFREE

Copies0

About

Animated hamburger mobile menu with overlay and slide-in drawer

More from Navigation

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface FloatingDockProps {
  icons: { id: number; src: string; }[];
}

class FloatingDock extends React.Component<FloatingDockProps, {}> {
  constructor(props: FloatingDockPro

FloatingDock

Navigation

'use client'
import { useState } from 'react'

const NAV = [
  { id: 'home', icon: '◉', label: 'Overview', shortcut: 'G H' },
  { id: 'components', icon: '⬡', label: 'Components', shortcut: 'G C', badge: 120, children: [
    { id: 'buttons', label: '

SidebarNav

Navigation

'use client';

import React from 'react';

interface PaginationNavProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

const PaginationNav: React.FC<PaginationNavProps> = ({ currentPage, totalPages, onPageCh

PaginationNav

Navigation

'use client';

import React, { useState } from 'react';

interface Tab {
  id: number;
  label: string;
}

const tabs: Tab[] = [
  { id: 1, label: 'Tab 1' },
  { id: 2, label: 'Tab 2' },
  { id: 3, label: 'Tab 3' },
  { id: 4, label: 'Tab 4' },
];

c

TabsNav

Navigation