Skip to main content

Nav Dropdowns

The [nav] block supports dropdown menus by indenting child links under a parent item.

Syntax​

Indent child links with 2 spaces or 1 tab. A parent item with children renders as a dropdown in the site header; it keeps its own URL as the toggle link.

[nav]
Home -> /
Products -> /products
  Product A -> /product-a
  Product B -> /product-b
Contact -> /contact

Rules​

  • Only one level of nesting is supported (children of children are not rendered).
  • Child link paths are full absolute paths — the parser does no relative resolution against the parent URL. /product-a means exactly /product-a.
  • A parent item with children still navigates to its own URL when clicked (it acts as both a link and a dropdown trigger).
  • Parent items without any indented children render as plain nav links, as usual.

Rendered output​

The dropdown uses Bootstrap's .dropdown styles, but not Bootstrap's JavaScript, which published sites don't load. A small inline script ships with the site header, only when the nav has dropdowns. It opens and closes a menu on click, and closes it on Escape, on a click outside the menu, on choosing an item, or when focus leaves the menu. It keeps aria-expanded on the toggle in sync.

<li class="nav-item dropdown">
  <a href="/products" class="nav-link dropdown-toggle" title="Products" data-mp-toggle="dropdown" aria-expanded="false">Products</a>
  <ul class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
    <li><a href="/product-a" class="dropdown-item" title="Product A">Product A</a></li>
    <li><a href="/product-b" class="dropdown-item" title="Product B">Product B</a></li>
  </ul>
</li>