Navigation Helpers

Traditional navigation menus tend to work the same way, so we've standardized this in Hammer and take care of the dynamic aspects for you.

Introduction

Hammer automatically adds classes to your navigation links to help you style the current page. When Hammer sees an href that's linking to the page it's on, it adds a class of current to the anchor tag. To be extra helpful, if the anchor tag is wrapped in a list item, the list item also gets that current class.

This means you can write your navigation once and Hammer will automatically handle highlighting the current page, making it easy to style active navigation items with CSS.

Basic Navigation

Here's a simple navigation menu example:

<ul class="menu">
  <li><a href="../index.html">Home</a></li>
  <li><a href="../about.html">About</a></li>
  <li><a href="../contact.html">Contact</a></li>
</ul>

When viewing the about.html page, Hammer will automatically add the current class to both the anchor tag and its parent list item:

<ul class="menu">
  <li><a href="index.html">Home</a></li>
  <li class="current"><a href="about.html" class="current">About</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>
Tip: Use the @path tag for your navigation links to ensure proper path resolution. Hammer will automatically convert these to the correct paths in your built site.

Nested Navigation

For nested navigation structures, Hammer provides an additional current-parent class. Links pointing to the current directory's, or to a parent directory's index.html file are given the class current-parent.

This means that no matter which page you're in, your primary navigation can always have a current-parent class if you're in that folder. For instance, if you're inside docs/info.html, then any links to docs/index.html will have the current-parent class.

Here's an example of a nested navigation structure:

<ul class="menu">
  <li><a href="../about/index.html">Home</a></li>
  <li><a href="../about/team.html">Team</a></li>
  <li><a href="../about/contact.html">Contact</a></li>
</ul>

When viewing the about/team.html page, Hammer will add the current-parent class to the link pointing to about/index.html, and the current class to the active page:

<ul class="menu">
  <li><a class="current-parent" href="about/index.html">Home</a></li>
  <li class="current"><a href="about/team.html" class="current">Team</a></li>
  <li><a href="about/contact.html">Contact</a></li>
</ul>
Tip: The current-parent class is perfect for section-level navigation where you want to highlight the parent section when viewing any page within that section.

Styling Examples

With the automatic classes that Hammer adds, you can easily style your navigation. Here are some common CSS patterns:

Basic Current Page Styling

/* Style the current page link */
.menu a.current {
    color: #007bff;
    font-weight: bold;
}

/* Style the list item containing the current page */
.menu li.current {
    background-color: #f0f0f0;
}

Parent Section Styling

/* Style the parent section link */
.menu a.current-parent {
    color: #6c757d;
    font-style: italic;
}

/* Combine with current for active parent page */
.menu a.current-parent.current {
    color: #007bff;
    font-weight: bold;
}

Complete Navigation Styling

.menu {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 1rem;
}

.menu a {
    text-decoration: none;
    color: #333;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.menu a:hover {
    background-color: #f8f9fa;
}

.menu a.current {
    background-color: #007bff;
    color: white;
}

.menu a.current-parent {
    color: #007bff;
    font-weight: 500;
}

Best Practices

Using @path Tags

  • Always use @path tags in your navigation links to ensure proper path resolution
  • This ensures your navigation works correctly regardless of where the page is located in your site structure
  • Hammer will automatically convert these to the correct relative paths in your built site

Navigation Structure

  • Keep your navigation structure consistent across your site
  • Use semantic HTML with proper list structures
  • Wrap navigation in semantic elements like <nav> tags

CSS Organization

  • Style the current class for active page indicators
  • Use current-parent for section-level highlighting
  • Consider accessibility when styling active states (ensure sufficient contrast)

Next Steps

Now that you understand navigation helpers, learn about: