Navigation Tag

The {cms:nav:pages} tag generates navigation HTML from your published pages automatically. The order and hierarchy mirror what you set in the admin Pages list.

Basic usage

Place the tag wherever you want your navigation to appear:

<nav>
  {cms:nav:pages}
</nav>

HTML output

The tag generates a nested <ul> list of anchor links. For a site with a Home, About, Services, Services/Web Design, and Contact page, the output looks like:

<ul class="cms-nav">
  <li><a href="/">Home</a></li>
  <li class="has-children">
    <a href="/about">About</a>
  </li>
  <li class="has-children nav-parent">
    <a href="/services">Services</a>
    <ul>
      <li class="nav-active"><a href="/services/web-design">Web Design</a></li>
    </ul>
  </li>
  <li><a href="/contact">Contact</a></li>
</ul>

CSS classes

Styling navigation

The nav tag provides the structure and classes — all the visual styling is up to you in your CSS. Here's a minimal example for a horizontal top navigation:

/* Horizontal nav */
.cms-nav {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  padding: 0;
  margin: 0;
}

.cms-nav a {
  text-decoration: none;
  color: inherit;
}

.cms-nav .nav-active > a {
  font-weight: bold;
  color: #2563eb;
}

/* Hide child menus by default */
.cms-nav ul {
  display: none;
  list-style: none;
  position: absolute;
  background: white;
  padding: .5rem 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.cms-nav li:hover > ul {
  display: block;
}

Which pages are included?

Only published pages appear in the navigation. Draft and unlisted pages are excluded.

The home page (slug home) is included and links to /. All other pages link to /{slug} (or /{parent}/{slug} for child pages).

Page order

Pages appear in the order set by the drag-and-drop interface in the admin Pages list. Within each parent, children are also ordered by their admin position. Change the order in Admin → Pages by dragging.

Excluding pages from navigation

Set a page to Unlisted status to keep it accessible by URL but exclude it from navigation and the sitemap. This is useful for landing pages, confirmation pages, or pages still being written.

Framework presets

If you're using a CSS framework, you can use a preset tag variant that outputs the framework's expected markup instead of the default semantic HTML.

{cms:nav:pages:bootstrap}

Outputs Bootstrap 5 nav markup. Use it inside a <nav class="navbar">:

<nav class="navbar navbar-expand-lg">
  <div class="collapse navbar-collapse">
    {cms:nav:pages:bootstrap}
  </div>
</nav>

The generated HTML uses Bootstrap's nav classes. Pages with children become dropdowns:

<ul class="navbar-nav">
  <li class="nav-item nav-home">
    <a class="nav-link" href="/">Home</a>
  </li>
  <li class="nav-item dropdown nav-services">
    <a class="nav-link dropdown-toggle" href="#" id="dd-services"
       role="button" data-bs-toggle="dropdown" aria-expanded="false">Services</a>
    <ul class="dropdown-menu">
      <li class="nav-item nav-web-design">
        <a class="nav-link" href="/web-design">Web Design</a>
      </li>
    </ul>
  </li>
  <li class="nav-item nav-contact">
    <a class="nav-link" href="/contact">Contact</a>
  </li>
</ul>