![見出し画像](https://assets.st-note.com/production/uploads/images/134942279/rectangle_large_type_2_36e85ecb06e9912e8a9853926b058d29.jpeg?width=1200)
React,Typescriptを使った多階層ドロップダウンメニューの紹介
まえがき
Udemyやランサーズにあるようなホバーしたら、サブメニューまで展開されるUIになります。
floating uiを使って実現できましたので、紹介です。
今回はメニュー構造もそれっぽくさせて、有料で公開してみます。
データ構造を以下のように定義して、実現しています。
export type TFlattedMenu = {
id: string;
name: string;
parentId: string | null;
};
export type TMenu = {
id: string;
name: string;
parentId: string | null;
children: TMenu[];
depth: number;
};
もちろん、ハードコーディング等ではなく、データ構造から導出しています。
export const dbMenus: TFlattedMenu[] = [
{ id: "1", name: "ビジネス", parentId: null },
{ id: "2", name: "業界ニュース", parentId: "1" },
{ id: "3", name: "スタートアップ", parentId: "1" },
{ id: "4", name: "ベンチャーキャピタル", parentId: "3" },
{ id: "5", name: "経済", parentId: "1" },
{ id: "6", name: "世界経済", parentId: "5" },
{ id: "7", name: "経済危機", parentId: "6" },
{ id: "8", name: "国内経済", parentId: "5" },
...
]
デモ
![](https://assets.st-note.com/img/1711258879967-FlTATqbouu.png?width=1200)
アイテムクリック時にリンク飛ぶことを意識して、階層データの判定処理を入れています。
Twitterにも投稿してみました。
以下は有料で、デモコードへのリンクが張ってあります。購入された方は適宜流用してくださいませ。
デモコード(有料)
ここから先は
0字
¥ 50,000
この記事が気に入ったらサポートをしてみませんか?