Back to Browse

Building a menu tree using VueJs, TailwindCSS and HeadlessUI

11.5K views
Aug 22, 2022
18:26

What should I cover next? Leave a comment bellow! In this video we'll build a menu tree component using VueJs, TailwindCSS, and HeadlessUI. Code snippets: https://tallpad.com/series/headlessui/lessons/building-a-menu-tree-vue-component-with-tailwindcss-and-headlessui ▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬ 00:00 - Intro / focus 00:24 - HTML sidebar 01:21 - Style sidebar 02:24 - Turn nav HTML tree into an array of objects 05:10 - Create NavItem component 06:58 - Add HeadlessUI disclosures 08:28 - Add menu icons 09:49 - Default menu styles 11:07 - Hover menu styles 12:29 - Style disclosure OPEN state 14:14 - Style menu item ACTIVE state 15:22 - Open disclosures containing an active item

Download

0 formats

No download links available.

Building a menu tree using VueJs, TailwindCSS and HeadlessUI | NatokHD