Menu Bar

A menu bar with interactive tooltip previews that appear on hover. It is customizable for various menu items.

Home
About
Services
Contact

Copy this code and create a new component at @/components/MenuBar

This component is ideal for navigation menus where extra details need to be shown when hovering over menu items.


  //@/components/MenuBar/MenuBarItem.tsx
  
  import React from "react";
  
  interface MenuBarItemProps {
    content: string;
    tooltip: string;
    link?: string;
    linkText?: string;
  }
  
  const menuBarStyles = {
    base: "relative group inline-block px-4 py-2",
    body: "absolute opacity-0 invisible group-hover:opacity-100 group-hover:visible bg-gray-950 text-white rounded-md p-2 shadow-md transition-opacity duration-300 border border-zinc-800",
    tooltip: "text-sm w-[10rem] text-zinc-300",
    link: "text-sm mt-2 text-zinc-400 hover:text-zinc-500",
  };
  
  const MenuBarItem: React.FC<MenuBarItemProps> = ({
    content,
    tooltip,
    link,
    linkText = "Go to Link",
  }) => {
    return (
      <div className={menuBarStyles.base}>
        <div>{content}</div>
        <div className={menuBarStyles.body}>
          <p className={menuBarStyles.tooltip}>{tooltip}</p>
          {link && (
            <a href={link} target="_blank" className={menuBarStyles.link}>
              {linkText}
            </a>
          )}
        </div>
      </div>
    );
  };
  
  export default MenuBarItem;