導覽 on BenzHubhttps://benzhub.github.io/tags/%E5%B0%8E%E8%A6%BD/Recent content in 導覽 on BenzHubHugozh-TWFri, 04 Sep 2026 00:00:00 +0000導覽模式:navbar、下拉選單與行動 Drawer 全攻略 | TailwindCSS 完整教學https://benzhub.github.io/post/tailwindcss/035-navigation-patterns/Fri, 04 Sep 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/035-navigation-patterns/<blockquote> <p><strong>導覽(Navigation)</strong> 是使用者在網站裡移動的動線——navbar、下拉選單、麵包屑、Drawer,每一個都在回答「我現在在哪、可以去哪」。這一篇用 <strong>TailwindCSS</strong> 把桌機水平 <code>navbar</code>、響應式 <code>hamburger</code> 選單、<code>group</code>/<code>peer</code>/<code>details</code> 下拉、行動版 <strong>Drawer</strong> 側邊抽屜,以及 <code>sticky</code> 固定導覽、麵包屑與 <code>pagination</code>、<code>tabs</code> 一次做齊,搭配 v4 語法與少量 JS,兼顧美觀、響應式與無障礙。</p> </blockquote>