this effect basically moves around the idea on how to showcase links in navigationbars or any sections profissionally and visually perfect, the effect tends on opacity but do not worry you can adjust the code as you want to achieve the best result

The Structure

    import { ArrowRight } from "lucide-react";
    import React from "react";
    
    const Examplier = () => {
      const links = [
        {
          title: "About Me",
          link: "/about-me",
        },
        {
          title: "Thoughts",
          link: "/thoughts",
        },
        {
          title: "Projects",
          link: "/projects",
        },
        {
          title: "Achievements",
          link: "/achievements",
        },
        {
          title: "Music",
          link: "/music",
        },
      ];
    
      return (
        <div>
          <div>
            {links.map((item, i) => (
              <a href={item.link}>
                <div
                  key={i}
                  className=" max-w-sm w-full py-2.5 flex items-center justify-between"
                >
                  <div>{item.title}</div>
                  <div>
                    <ArrowRight size={15} />
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      );
    };
    
    export default Examplier;
    

what do we have here is basic array of Links styled and organized using tailwindcss for now nothing special yet

You can use any form of icons from any library, for this example i am using lucide-react, for your example feel free to be creative

Continue on logic

    "use client";
    import { ArrowRight } from "lucide-react";
    import React, { useState } from "react";
    
    const Examplier = () => {
      const links = [
        {
          title: "About Me",
          link: "/about-me",
        },
        {
          title: "Thoughts",
          link: "/thoughts",
        },
        {
          title: "Projects",
          link: "/projects",
        },
        {
          title: "Achievements",
          link: "/achievements",
        },
        {
          title: "Music",
          link: "/music",
        },
      ];
    
      const [Hover, setHover] = useState("all");
    
      return (
        <div>
          <div
            onMouseLeave={() => {
              setHover("all");
            }}
          >
            {links.map((item, i) => (
              <a
                href={item.link}
                onMouseEnter={() => {
                  setHover(item.link);
                }}
              >
                <div
                  key={i}
                  className=" max-w-sm w-full py-2.5 flex items-center justify-between"
                >
                  <div>{item.title}</div>
                  <div>
                    <ArrowRight size={15} />
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      );
    };
    
    export default Examplier;
    
                

by adding "use client" and importing use state, we can actually track the changes of links properties, added onMouseLeave function to the parent div that set Hover back to "all" , and added onMouseEnter in each link is mapped through, with setHover(item.link) so we can know which is link is being hovered over in the current moment

The dynamic tailwindcss classes

    "use client";
    import { ArrowRight } from "lucide-react";
    import React, { useState } from "react";
    
    const Examplier = () => {
      const links = [
        {
          title: "About Me",
          link: "/about-me",
        },
        {
          title: "Thoughts",
          link: "/thoughts",
        },
        {
          title: "Projects",
          link: "/projects",
        },
        {
          title: "Achievements",
          link: "/achievements",
        },
        {
          title: "Music",
          link: "/music",
        },
      ];
    
      const [Hover, setHover] = useState("all");
    
      return (
        <div>
          <div
            onMouseLeave={() => {
              setHover("all");
            }}
          >
            {links.map((item, i) => (
              <a
                href={item.link}
                onMouseEnter={() => {
                  setHover(item.link);
                }}
              >
                <div
                    className={cn(
                      "py-1.5  transition  group w-full hover:scale-[102%] duration-300 flex items-center justify-between",
                      Hover == item.title ? "opacity-100" : "opacity-50 md:blur-sm",
                      Hover == "all" ? "opacity-100 md:blur-none" : null
                    )}
                >
                    <div className=" text-sm md:text-base line-clamp-1">
                      {item.title}
                    </div>
                    <div className=" transition-all hidden md:block text-xs duration-300 ease-in-out opacity-0 group-hover:opacity-100">
                      {item.date}
                    </div>
                  </div>
              </a>
            ))}
          </div>
        </div>
      );
    };
    
    export default Examplier;
    
                

Finnaly we add the dynamic classes , so when you mouse leave the parent div, all of links go back to original unhovered state where they all opacity-100% and no blur, when you hover a link, that link get scaled and other links get blurred and fade

Conclusion

i used this type of links all throughout my portfolio because it's so much appealing and yet simple, modern, and eye catching, thank you and i hope you enjoyed the tutorial <3