Dropdown menu of Navbar isn't working in Next.js App

[dhavalveera]

The Dropdown menu of Navbar isn't working in Next.js App

<div> <nav className={styles.nav}> <div className='nav-wrapper'> <Link href='/'> <a className='brand-logo'> <Image fluid src='/H.png' alt='Hotel Name Logo' loading='lazy' /> </a> </Link> <Link href='#'> <a data-target='slide-out' className='sidenav-trigger'> <img className='img-fluid img-responsive' src='/menu.svg' alt='Menu Icon' loading='lazy' /> </a> </Link> <ul className='right hide-on-med-and-down'> <li className={styles.li}> <Link href='/'> <a rel='nofollow noopener noreferrer'>Home</a> </Link> </li> <li className={styles.li}> <Link href='/about'> <a rel='nofollow noopener noreferrer'>About</a> </Link> </li> <li className={styles.li}> <Link href='#'> <a className='dropdown-trigger' data-target='dropdown1'> Our Rooms <img height='32' width='32' src='/bubble-down.svg' alt='Down Arrow' /> </a> </Link> </li> <li className={styles.li}> <Link href='/restaurant'> <a rel='nofollow noopener noreferrer'>Restaurant</a> </Link> </li> <li className={styles.li}> <Link href='/contact'> <a rel='nofollow noopener noreferrer'>Contact Us</a> </Link> </li> </ul> </div> </nav> <ul className='dropdown-content' id='dropdown1'> <li className={styles.li}> <Link href='accommodation/single-room'> <a rel='nofollow noopener noreferrer'>Single Room</a> </Link> </li> <li className={styles.li}> <Link href='accommodation/medium-room'> <a rel='nofollow noopener noreferrer'>Medium Room</a> </Link> </li> <li className={styles.li}> <Link href='accommodation/family-room'> <a rel='nofollow noopener noreferrer'>Family Room</a> </Link> </li> <li className={styles.li}> <Link href='accommodation/luxury-single-room'> <a rel='nofollow noopener noreferrer'>Luxury Room</a> </Link> </li> </ul> <ul className='sidenav sidenav-close' id='slide-out'> <li className={styles.li}> <Link href='/'> <a rel='nofollow noopener noreferrer'>Home</a> </Link> </li> <li className={styles.li}> <Link href='/about'> <a rel='nofollow noopener noreferrer'>About</a> </Link> </li> <li> <Link href='accommodation/single-room'> <a rel='nofollow noopener noreferrer'>Single Room</a> </Link> </li> <li> <Link href='accommodation/medium-room'> <a rel='nofollow noopener noreferrer'>Medium Room</a> </Link> </li> <li> <Link href='accommodation/family-room'> <a rel='nofollow noopener noreferrer'>Family Room</a> </Link> </li> <li> <Link href='accommodation/luxury-single-room'> <a rel='nofollow noopener noreferrer'>Luxury Room</a> </Link> </li> <li className={styles.li}> <Link href='/restaurant'> <a rel='nofollow noopener noreferrer'>Restaurant</a> </Link> </li> <li className={styles.li}> <Link href='/contact'> <a rel='nofollow noopener noreferrer'>Contact Us</a> </Link> </li> </ul> </div>

above-mentioned is the HTML Code & below-mentioned is the initializer given on MaterializeCSS Documentations.

$(document).ready(function () { $('.dropdown-trigger').dropdown(); });

I tried searching on Google and tried many different options, but unfortunately, none of them was working.

please help me to solve this bug/error. @Dogfalo @acburst

[LoganTann]

Materialize is not supported inside modern javascript frameworks that uses virtual dom like react.

Also, I recommand you to open an issue in the community fork rather than here. The original devs don't seems to maintain this repository anymore.

[dhavalveera]

Materialize is not supported inside modern javascript frameworks that uses virtual dom like react.

Also, I recommand you to open an issue in the community fork rather than here. The original devs don't seems to maintain this repository anymore.

can you recommend to me which community fork?

also do you recommend me anyother similar UI Framework which can be helpful to achieve the same thing?

[LoganTann]

can you recommend to me which community fork?

https://github.com/materializecss/materialize

also do you recommend me anyother similar UI Framework which can be helpful to achieve the same thing?

https://www.beercss.com/ or https://material.pages.dev/

[LoganTann]

Ah sorry, take a look at https://github.com/react-materialize/react-materialize

It should work since you're using next.js which is build on top of react

[LoganTann]

Hello, I recommand you to close this issue if my answer solved your problem :)