improving navigation on mediumish jekyll blog

By -

Why Navigation Matters

Effective navigation is essential for retaining readers and improving the overall usability of your blog. A Mediumish Jekyll blog, though minimal by default, can benefit greatly from thoughtful navigation enhancements that improve content discoverability and user engagement.

Core Navigation Components in Mediumish

  • Top navbar (usually includes links to Home, About, Contact, etc.)
  • Post-to-post navigation at the end of each article
  • Category and tag links for grouping content
  • Pagination on index pages

Strategies for Improving Blog Navigation

1. Add a Sticky Top Navbar

Keeping the navbar fixed at the top improves access to major sections as users scroll through long articles.

  • Edit _includes/header.html
  • Add a position: sticky; or position: fixed; CSS rule
  • Ensure mobile responsiveness by using media queries

2. Enable Post-to-Post Navigation

Guide readers to the next or previous post with simple navigation links at the bottom of each article:

{% if page.previous %}
  <a href="{{ page.previous.url }}">← {{ page.previous.title }}</a>
{% endif %}
{% if page.next %}
  <a href="{{ page.next.url }}">{{ page.next.title }} →</a>
{% endif %}

Add this inside _layouts/post.html under the article content area.

3. Build a Category-Based Navigation

Group your blog posts by category for easier exploration:

  • Create a category.html layout
  • Use site.categories to loop and display categories in the sidebar
  • Add category links to the navbar for high-traffic sections

4. Add a Search Function

Improve content accessibility with a client-side search engine:

  • Use Simple Jekyll Search plugin
  • Generate a search.json file from your posts
  • Integrate the search input in your navbar or sidebar

5. Create a Mega Menu or Dropdown

If your site has many categories or sections, use a dropdown menu to organize links effectively:

  • Use nested <ul> lists in _includes/header.html
  • Style with CSS to show submenus on hover or click

6. Related Posts Section

Guide readers to relevant content based on category, tags, or manual curation:

  • Use a related posts loop filtered by category or tag
  • Place the section under each article in post.html
  • Style it with cards or thumbnails to enhance visibility

7. Breadcrumb Navigation

Add breadcrumb trails to show users their location within your blog hierarchy:

  • Implement using Liquid logic to reflect category → post relationships
  • Add links back to home and categories

8. Sidebar Navigation Widgets

Use sidebars to display:

  • Recent posts
  • Popular posts (manually curated or based on time on site via analytics)
  • Tags cloud
  • Categories list

Edit _includes/sidebar.html to insert and customize these widgets.

Case Study: Adding a Dropdown Menu

Let’s walk through adding a basic dropdown to your navigation menu:

  1. Open _includes/header.html
  2. Add a parent link like “Topics” with a nested list of categories
  3. Style the nested list with CSS to appear on hover
  4. Test on desktop and mobile for touch compatibility

Bonus: Scroll-To-Top Button

Add a floating button to help users return to the top of the page:

  • Add HTML for the button in _layouts/default.html
  • Use JavaScript to show/hide the button on scroll
  • Smooth scroll with CSS or JS on click

Testing Your Navigation

Once custom navigation features are added:

  • Check usability on mobile and tablet devices
  • Ensure accessibility (keyboard navigation, ARIA attributes)
  • Test in different browsers for layout consistency

Summary

Improving navigation on your Mediumish Jekyll blog is a high-impact upgrade. With strategic enhancements like sticky menus, category links, and related posts, you can dramatically improve content discoverability and retention. Start with simple updates and iterate based on reader feedback and analytics data.