DEV Community

Cover image for Panduan Lengkap Membuat Sticky Navbar untuk Navigasi Lebih Baik Pada React JS
ramadhan.dev
ramadhan.dev

Posted on • Edited on

1

Panduan Lengkap Membuat Sticky Navbar untuk Navigasi Lebih Baik Pada React JS

Pada sesi kali ini kita akan membuat sticky navbar dengan tailwind css dan react js.

Proses instalasi react dan tailwind css bisa di lihat di artikel sebelumnya

Mari kita langsung buat code untuk navbarnya

Create HTML untuk tampilan Navbarnya

<React.Fragment>
      <nav className={`fixed inset-x-0 top-0 z-50 flex items-center justify-center h-[60px] py-3 [&.is-sticky]:bg-white  border-b border-slate-200  [&.is-sticky]:shadow-lg [&.is-sticky]:shadow-slate-200/25 navba ${navClass}`} id="navbar">
        <div className="container 2xl:max-w-[90rem] px-4 mx-auto flex items-center self-center w-full">
          <div className="mx-auto">
            <ul id="navbar7" className={`absolute inset-x-0 z-20 items-center py-3 bg-white shadow-lg dark:bg-zink-600 dark:md:bg-transparent md:z-0 navbar-menu rounded-b-md md:shadow-none md:flex top-full ltr:ml-auto rtl:mr-auto md:relative md:bg-transparent md:rounded-none md:top-auto md:py-0`}>
              <li>
                <a href="#home"
                  className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Home" ? "active" : ""}`}
                  onClick={() => handleLinkClick("/Home")}
                >
                  Home</a>
              </li>
              <li>
                <a href="#features"
                  className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Features" ? "active" : ""}`}
                  onClick={() => handleLinkClick("/Features")}
                >
                  Layanan Kami</a>
              </li>
            </ul>
          </div>

        </div>
      </nav>
      <section className="relative mt-[60px] h-[800px] bg-yellow-600" id="home">
        <div className="flex items-center justify-center h-full">
          HOME
        </div>
        </section>
      <section className="relative h-[800px] bg-green-600" id="features">
        <div className="flex items-center justify-center h-full">
          FEATURES
        </div>
      </section>
    </React.Fragment>
Enter fullscreen mode Exit fullscreen mode

Fungsi Scroll

fungsi ini berfungsi untuk mengubah status navbar menjadi sticky, dan tambahkan juga animasi smooth agar proses perpindahan halamannya menjadi bagus



  const [navClass, setNavClass] = React.useState<string>('');

  const scrollNavigation = () => {
    var scrollUp = document.documentElement.scrollTop;
    if (scrollUp >= 50) {
      setNavClass('is-sticky');
    } else {
      setNavClass('');
    }
  };


  React.useEffect(() => {
    window.addEventListener('scroll', scrollNavigation, true);
    document.documentElement.classList.add("overflow-x-hidden", "scroll-smooth", "group");

    return () => {
      window.removeEventListener('scroll', scrollNavigation, true);
      document.documentElement.classList.remove("overflow-x-hidden", "scroll-smooth", "group");

    };
  }, []);

Enter fullscreen mode Exit fullscreen mode

Fungsi Set Active menu

fungsi ini berfungsi untuk merubah class aktif yang ada pada menu, dan mengarahkan halaman sesuai deangan menu yang di akses

  const [activeLink, setActiveLink] = React.useState<string>("/Home");
  const handleLinkClick = (target: string) => {
    setActiveLink(target);
  };

Enter fullscreen mode Exit fullscreen mode

Script lengkapnya seperti berikut

import React from "react"

function App() {



  const [navClass, setNavClass] = React.useState<string>('');

  const scrollNavigation = () => {
    var scrollUp = document.documentElement.scrollTop;
    if (scrollUp >= 50) {
      setNavClass('is-sticky');
    } else {
      setNavClass('');
    }
  };


  React.useEffect(() => {
    window.addEventListener('scroll', scrollNavigation, true);
    document.documentElement.classList.add("overflow-x-hidden", "scroll-smooth", "group");

    return () => {
      window.removeEventListener('scroll', scrollNavigation, true);
      document.documentElement.classList.remove("overflow-x-hidden", "scroll-smooth", "group");

    };
  }, []);



  const [activeLink, setActiveLink] = React.useState<string>("/Home");
  const handleLinkClick = (target: string) => {
    setActiveLink(target);
  };



  return (
    <React.Fragment>
      <nav className={`fixed inset-x-0 top-0 z-50 flex items-center justify-center h-[60px] py-3 [&.is-sticky]:bg-white  border-b border-slate-200  [&.is-sticky]:shadow-lg [&.is-sticky]:shadow-slate-200/25 navba ${navClass}`} id="navbar">
        <div className="container 2xl:max-w-[90rem] px-4 mx-auto flex items-center self-center w-full">
          <div className="mx-auto">
            <ul id="navbar7" className={`absolute inset-x-0 z-20 items-center py-3 bg-white shadow-lg dark:bg-zink-600 dark:md:bg-transparent md:z-0 navbar-menu rounded-b-md md:shadow-none md:flex top-full ltr:ml-auto rtl:mr-auto md:relative md:bg-transparent md:rounded-none md:top-auto md:py-0`}>
              <li>
                <a href="#home"
                  className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Home" ? "active" : ""}`}
                  onClick={() => handleLinkClick("/Home")}
                >
                  Home</a>
              </li>
              <li>
                <a href="#features"
                  className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Features" ? "active" : ""}`}
                  onClick={() => handleLinkClick("/Features")}
                >
                  Layanan Kami</a>
              </li>
            </ul>
          </div>

        </div>
      </nav>
      <section className="relative mt-[60px] h-[800px] bg-yellow-600" id="home">
        <div className="flex items-center justify-center h-full">
          HOME
        </div>
        </section>
      <section className="relative h-[800px] bg-green-600" id="features">
        <div className="flex items-center justify-center h-full">
          FEATURES
        </div>
      </section>
    </React.Fragment>
  )
}

export default App

Enter fullscreen mode Exit fullscreen mode

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (0)

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay