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 component. No additional JavaScript is needed — Bootstrap's collapse script already loads with the site header.

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="/products">Products</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="/product-a">Product A</a></li>
    <li><a class="dropdown-item" href="/product-b">Product B</a></li>
  </ul>
</li>