YM
Yanelly Michelena

Navbar - Copy this React, Tailwind Component to your project

Import { useState } from "react"; import { FaChevronDown, FaChevronRight } from "react icons/fa"; import { Link } from "react router dom"; import logoOMC from "../../assets/logo.png"; const Navbar = () => { const [open, setOpen] = useState(false); const menuItems = [ { title: "Diagnóstico Ocular Personalizado", submenu: [], }, { title: "Exámenes", submenu: [ "Campo Visual", "Tomografía de Segmento Anterior (Córnea)", "Ecografía Ocular.", { title: "Tomografía (OCT)", subsubmenu: ["Mácula", "N. ÓPTICO"], }, "Biometría Modo A (Contacto).", "Gonioscopía Digital.", "Retinografía Normal y Periférica.", ], }, { title: "Especialidades", submenu: [ "Cirugía de Catarata", "Cirugía de Pterigion", "Retina y Vítreo", "Cirugía Refractiva", "Glaucoma", ], }, { title: "Nosotros", submenu: [], }, { title: "Staff Médico", submenu: [], }, ]; return ( <header className="shadow xl px 28 py 2 bg white max md:px 6"> <nav> <div className="flex items center justify between"> <Link to="/" className="flex items center"> <img src={logoOMC} alt="Logo OMC" className="w 24 h 24 object contain opacity 90" /> </Link> <button className="bg sky 900 text white px 6 py 3 rounded full hover:bg sky 800 transition duration 200 text base cursor pointer uppercase font medium"> Agenda Tu Cita </button> </div> </nav> </header> ); }; export default Navbar; Con los datos que tienes quiero hacer un navbar responsive multilevel 3 niveles..

Prompt
Component Preview

About

Navbar - Responsive multilevel design with dropdowns, logo integration, and a call-to-action button. Built with React and Tailwind. Start coding now!

Share

Last updated 1 month ago