1/30

サイト制作

Shadcn/ui

shadcn/uiのNavigationMenuは、「階層が重なっていたり、複雑な実装でのメニュー」のコンポーネントであり、nav箇所を全部やればいいというわけではなく、単純な箇所は普通のnav/ul/liでよい。

Next.js　動的クラス

{``}より{cn()}を使う。

ナビ スクロールで上下判定、ヘッダーを畳む

畳んだ場合、タブフォーカスさせてはいけないので昔はaria-hidden=trueかつtabindex=-1する。2023年4月からinert属性が全ブラウザ対応したのでそれを使う。

スクロールイベント

MDNにも書いているが、scrollイベントを使う際はrAfなどを使ってイベントを間引くこと推奨。