2024/12/28

React + TailwindCSSだけで実装するアニメーション付きハンバーガーメニュー

左からニュルっと出てくるタイプのハンバーガーメニューです。

About Preview

このコンポーネントを使いたい場合は、component.tsxの内容をコピーして、render.tsxを参考にコンポーネントを使ってください

Default Packages

プレビュー画面では以下のパッケージがインストールされています

[email protected]
TailwindCSS
clsx
tailwind-merge

pnpm add tailwindcss clsx tailwind-merge

Component PropTypes

type BurgerMenuType = {
  open: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
  menu: MenuType;
  width?: number;
  backgroundColor?: string;
  className?: string;
};

type BurgerIconType = {
  open: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
  size?: number;
  borderWidth?: number;
  borderColor?: string;
  className?: string;
};

type MenuType = MenuItemType[];

type MenuItemType = {
  title: string;
} & (
  | {
      isParent: true;
      children: MenuItemType[];
    }
  | {
      isParent?: false;
      href: string;
    }
);