Emoji Nav

Navigation 13

About

Here is emoji nav bar component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Emoji Nav to your project and fits it to your theme.

Code

How Emoji Nav is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import EmogiNav from "@/components/ui/emoji-nav";
 
// get animated emogies from: https://googlefonts.github.io/noto-emoji-animation/
 
const navItems = [
{
label: "Home",
href: "#",
emogi: "https://cdn.21st.dev/assets/mirror/8b/8b891ba60e3d7cd9c508368094dbc2c8a8cb631190116b555e675c46ab255154.gif",
alt: "😍",
},
{
label: "About",
href: "#",
emogi: "https://cdn.21st.dev/assets/mirror/05/05eda22abc8a00179616cdec8f330abfc4435899cf9fee01654605b1400841a1.gif",
alt: "😄",
},
{
label: "Work",
href: "#",
emogi: "https://cdn.21st.dev/assets/mirror/83/83a4914484a3dcb34b2811a40545a7d3e34941eb74838cadf538c82213e665e4.gif",
alt: "😘",
},
{
label: "Services",
href: "#",
emogi: "https://cdn.21st.dev/assets/mirror/dc/dc9f8b8adf91f7f2d8316806b433ece9499369444fb97078c2a349bbb6a42cf2.gif",
alt: "🤑",
},
{
label: "Our Team",
href: "#",
emogi: "https://cdn.21st.dev/assets/mirror/ed/ed5fe5ed4b9f79aa558c263a83d00986e8dced828b244a3265f4ab684425a777.gif",
alt: "🥳",
},
{
label: "Contact",
href: "#",
emogi: "https://cdn.21st.dev/assets/mirror/8d/8d7352283c1a945867f3a56770f8de3eed8042915302a3e741b747ebe0ab2d82.gif",
alt: "👻",
},
];
 
const EmogiNavigation: React.FC = () => {
return (
 
<div>
<EmogiNav navItems={navItems} />
 
      <div className="preview flex min-h-[100px] w-full justify-center p-2 sm:p-10 items-center">
        <div className="relative w-full flex items-center justify-center">
          <p className="text-black dark:text-white">
            The Navbar will show on top of the page
          </p>
        </div>
      </div>
    </div>
 
);
};
 
export default EmogiNavigation;