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