Bootstrap 5 Menu Navbar with Dropdowns for HUGO | Intermediate Tutorial | Static Site Generation
This video is about creating a Menu Navbar with dropdowns using bootstrap 5 and Hugo. Watch my full length Hugo courses on skillshare here: https://www.skillshare.com/r/user/sean_emerson?gr_tch_ref=on&gr_trp=off You get 1 month free, to watch my courses using my referral link. Full length HUGO and Bootstrap 5 intro course https://skl.sh/3rsfq4y Full length SASS/SCSS building with Hugo Course https://skl.sh/3IKdWc2 Full length JavaScript building with Hugo Course https://skl.sh/3uHZcEz SEO and asset optimisation with Hugo Course https://skl.sh/3rthbOo Looking for the best value for money travel insurance that suits both travellers and digital nomads? Covid-19 coverage included! Use my link to support this channel. https://safetywing.com/nomad-insurance?referenceID=24741702&utm_source=24741702&utm_medium=Ambassador Like the video? Buy me a cofee!! https://www.buymeacoffee.com/futureweb Code to get started https://github.com/hugo-starters/basic-bootstrap-template Code of completed video https://github.com/future-wd/video-hugo-bootstrap-navbar-dropdown Links: https://getbootstrap.com/docs/5.2/components/navbar/ https://gohugo.io/templates/menu-templates/ https://gohugo.io/variables/menus/ https://gohugo.io/content-management/menus/ VIDEO - Installing Hugo on windows https://youtu.be/l7PHRA8t4Bw PLAYLIST - My other HUGO videos https://www.youtube.com/watch?v=sX1_R11wuxk&list=PLE92IfveVXuXTOjdPM_nleN6Cga_d3uJ- 0:00 - Introduction 0:36 - Download template 1:54 - Project orientation 2:35 - Copy bootstrap menu boilerplate 4:22 - Loop over menu with range 8:09 - Check for acive links 13:04 - Check for children 21:31 - Check if the dropdown contains active links 24:34 - Add dividers 26:10 - Optionally configure disable menu item (with example code) 4:54 - Additional customizations #hugo #bootstrap #ssg #webdev #coding
Download
0 formatsNo download links available.