A four-level navigation menu built on top of Bootstrap 5.3 that:
- Slides in as a full-screen offcanvas below the
lgbreakpoint - Behaves as a standard horizontal Bootstrap navbar at
lgand above - Lets every section heading (Products, Software, Web Apps, …) be both a clickable page AND an expandable submenu on mobile, via a split tap-target row
- Reverts to out-of-the-box Bootstrap dropdowns on desktop — click-to-open, single-open auto-close, hover-opens nested submenus
- Marks the selected leaf with a primary vertical bar and highlights the full ancestor path in primary text
Live demo: open index.html in a browser, or serve the directory with any static file server, e.g.:
python3 -m http.server 8765
# then visit http://localhost:8765/| File | What it is |
|---|---|
index.html |
The page. Standard Bootstrap navbar-expand-lg + offcanvas-lg markup with .dropdown-submenu for nested menus and a <button class="nav-expand"> between each section heading link and its <ul class="dropdown-menu">. |
styles.css |
~70 lines of substantive CSS. Every selector is anchored to #mainNav so nothing leaks into other components. |
nav.js |
~90 lines of vanilla JS for the split-target mobile toggle, the prototype page-content updater, and dropdown cleanup. All queries scoped to a single nav reference. |
docs/architecture.md |
The deep dive. Explains every deviation from OOB Bootstrap, with the cascade-specificity reasoning behind each rule and the close-on-second-tap touch-:hover gotcha. Read this first if you're picking up the code. |
docs/screenshots/ |
Screenshots used by the Confluence wiki page. |
Click Products for the top-level dropdown. Hover Software for its L2 flyout. Hover Web Apps for L3.
Tap the hamburger → full-screen offcanvas. Tap a section text (e.g. "Products") to navigate to that page. Tap the caret on the right of the same row to expand the section instead. Multiple sections can be open at once. Tap a leaf to navigate; offcanvas closes automatically.
- Chrome / Edge 105+, Safari 15.4+, Firefox 121+ — the
:has()selector wasn't used (we use[aria-expanded="true"]instead), so support follows Bootstrap 5.3's own baseline. - IE 11 not supported (Bootstrap 5.3 itself dropped it).
Bootstrap 5.3.3 via CDN. No build step, no bundler, no Sass.