Designing Helpful Navigation in Jekyll 404 Pages
The 404 Page as a Navigation Opportunity
Most developers treat the 404 page as an afterthought—just a polite dead end. But in a Jekyll site, especially when hosted on GitHub Pages, your 404.html is a critical component of user experience. Instead of a "sorry, nothing here" message, treat it as a high-value navigation point that can retain lost users and improve site engagement.
Key Elements of a Navigation-Focused 404 Page
To turn a failed link into a recovery path, your 404 should offer:
- Context: A clear message that explains what happened
- Search: A way to find what the user was looking for
- Popular Pages: Links to high-traffic or evergreen content
- Categories or Tags: Let users explore top-level topics
- Site Map or Directory: A visual overview of available content
Building the Layout in Jekyll
In your 404.html, you can use Liquid to include navigation links, load site structure, and even reuse components like headers or footers.
Sample 404 Layout with Navigation
<div class="error-page">
<h2>Oops! Page not found</h2>
<p>It looks like nothing is here. But you can explore other parts of the site.</p>
<input type="text" placeholder="Search..." id="search-box">
<button onclick="runSearch()">Search</button>
<h3>Popular Pages</h3>
<ul>
<li><a href="/blog/">Blog</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/projects/">Projects</a></li>
</ul>
<h3>Explore by Topic</h3>
<ul>
{% for category in site.categories %}
<li><a href="/categories/{{ category[0] }}">{{ category[0] | capitalize }}</a></li>
{% endfor %}
</ul>
<h3>Browse Site Map</h3>
<ul>
{% for page in site.pages %}
{% unless page.title == nil %}
<li><a href="{{ page.url }}">{{ page.title }}</a></li>
{% endunless %}
{% endfor %}
</ul>
</div>
Making the Page Responsive
Since this page may be the first impression for mobile users, ensure it’s optimized for responsiveness using Flexbox or CSS Grid. Add classes that define padding, font scaling, and link tap size.
Adding Visual Cues
Include visual components to improve orientation:
- Icons or emojis near categories or links
- Color contrasts for link groups
- Visual search bar with magnifier icon
Enhancing Engagement with Microcopy
Instead of generic “Page Not Found” text, use friendly microcopy like:
- “That link didn’t work, but here’s where you can go next.”
- “Looking for something specific? Try our search.”
- “We couldn’t find the page, but we have plenty more to discover.”
Using Jekyll Data for Dynamic Links
You can reference YAML data files from _data/ to list resources or links. This helps centralize navigation logic and reuses across site layouts.
Example
{% for resource in site.data.resources.popular %}
<li><a href="{{ resource.url }}">{{ resource.title }}</a></li>
{% endfor %}
Incorporating Search Functionality
If your Jekyll site uses client-side search (e.g. Simple-Jekyll-Search or Lunr.js), integrate the search input directly in your 404 page. Pre-fill it with the guessed term based on the broken path.
Pre-filling Search Box
<script>
const path = window.location.pathname;
const term = path.split('/').pop().replace(/[-_]/g, ' ');
document.getElementById('search-box').value = decodeURIComponent(term);
</script>
Linking to Recently Published Content
Keep users engaged by linking to your most recent posts. Use this Liquid snippet:
<h3>Latest Posts</h3>
<ul>
{% for post in site.posts limit:5 %}
<li><a href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
Track Navigation Behavior from 404 Page
Use Google Analytics or Plausible to monitor what users click on after arriving at the 404 page. This will help refine which links are most helpful and should be featured more prominently.
Track Click Events
<a href="/blog/" onclick="gtag('event', '404_navigation', { 'destination': 'blog' })">Blog</a>
Examples of Effective 404 Navigation Designs
- ReadMe: their 404 page mirrors the brand’s design and includes a search bar with docs and help links.
- Stripe: simple yet functional with key docs and developer links.
- Smashing Magazine: friendly tone with links to popular articles and topics.
Conclusion
Rather than a roadblock, the 404 page on your Jekyll site can be an inviting detour that guides visitors deeper into your content. By offering meaningful navigation, dynamic search, and helpful suggestions, you can lower bounce rates and transform frustration into discovery. Design it well, track it wisely, and let it become a powerful part of your site’s user journey.
