Navigation Link Component (Next/Previous)

A dark-themed button component with directional arrows, designed for navigation between blog chapters or sections. Supports both “Next” and “Previous” navigation with left and right-pointing arrows.

Features

  • Dark theme styling with hover effects
  • Directional arrows that animate on hover (left for previous, right for next)
  • Responsive design
  • Internationalization support
  • Multiple alignment options
  • Customizable text
  • Support for single or dual navigation buttons

Basic Usage




















  
  <a href="/next-chapter/" class="next-link  ">
    <span class="next-text">Next</span>
    <span class="next-arrow"></span>
  </a>
 




















  
  <a href="/prev-chapter/" class="prev-link  ">
    <span class="prev-text">Previous</span>
    <span class="prev-arrow"></span>
  </a>
 




















  
  <div class="nav-links-container">
    <a href="/prev-chapter/" class="prev-link prev-link-left ">
      <span class="prev-text">Previous</span>
      <span class="prev-arrow"></span>
    </a>
    <a href="/next-chapter/" class="next-link next-link-right ">
      <span class="next-text">Next</span>
      <span class="next-arrow"></span>
    </a>
  </div>

Custom Text




















  
  <a href="/next-chapter/" class="next-link  ">
    <span class="next-text">Continue Reading</span>
    <span class="next-arrow"></span>
  </a>
 



















  
  <a href="/prev-chapter/" class="prev-link  ">
    <span class="prev-text">Go Back</span>
    <span class="prev-arrow"></span>
  </a>
 




















  
  <a href="/next-chapter/" class="next-link  ">
    <span class="next-text">Next</span>
    <span class="next-arrow"></span>
  </a>
 




















  
  <a href="/prev-chapter/" class="prev-link  ">
    <span class="prev-text">Previous</span>
    <span class="prev-arrow"></span>
  </a>
 




















  
  <a href="/prev-chapter/" class="prev-link next-link-center ">
    <span class="prev-text">Previous</span>
    <span class="prev-arrow"></span>
  </a>

Full Width Navigation




















  
  <div class="nav-links-container">
    <a href="/prev-chapter/" class="prev-link prev-link-left ">
      <span class="prev-text">Previous</span>
      <span class="prev-arrow"></span>
    </a>
    <a href="/next-chapter/" class="next-link next-link-right ">
      <span class="next-text">Next</span>
      <span class="next-arrow"></span>
    </a>
  </div>

Internationalization

The component supports internationalization through translation keys.

Using Translation Keys




















  
  <a href="/next-chapter/" class="next-link  ">
    <span class="next-text">Continue Reading</span>
    <span class="next-arrow"></span>
  </a>
 



















  
  <a href="/prev-chapter/" class="prev-link  ">
    <span class="prev-text">Previous Chapter</span>
    <span class="prev-arrow"></span>
  </a>

Specifying Language




















  
  <a href="/next-chapter/" class="next-link  ">
    <span class="next-text">Siguiente Capítulo</span>
    <span class="next-arrow"></span>
  </a>
 



















  
  <a href="/prev-chapter/" class="prev-link  ">
    <span class="prev-text">Capítulo Anterior</span>
    <span class="prev-arrow"></span>
  </a>

Available Translation Keys

The following keys are available in _data/translations.yml:

  • next - Basic “Next” text
  • previous - Basic “Previous” text
  • continue_reading - “Continue Reading”
  • continue_reading_prev - “Continue Reading” (for previous)
  • next_chapter - “Next Chapter”
  • previous_chapter - “Previous Chapter”
  • read_more - “Read More”
  • read_more_prev - “Read More” (for previous)

Adding New Languages

To add support for a new language, edit _data/translations.yml:

ja:
  next: "次へ"
  previous: "前へ"
  continue_reading: "続きを読む"
  continue_reading_prev: "続きを読む"
  next_chapter: "次の章"
  previous_chapter: "前の章"
  read_more: "もっと読む"
  read_more_prev: "もっと読む"

Parameters

Parameter Type Required Default Description
next_url string No - The URL for the next link
next_text string No - Custom text for next link (overrides next_key)
next_key string No “next” Translation key for next link
prev_url string No - The URL for the previous link
prev_text string No - Custom text for previous link (overrides prev_key)
prev_key string No “previous” Translation key for previous link
lang string No site.lang or “en” Language code
align string No “left” for prev, “right” for next Alignment: “left”, “right”, “center”, “full”
class string No - Additional CSS classes

Styling

The component uses the following CSS classes:

  • .next-link - Next link component class
  • .next-text - Next link text container
  • .next-arrow - Next link arrow container
  • .prev-link - Previous link component class
  • .prev-text - Previous link text container
  • .prev-arrow - Previous link arrow container
  • .nav-links-container - Container for both previous and next links
  • .next-link-right - Right alignment for next link
  • .prev-link-left - Left alignment for previous link
  • .next-link-center, .prev-link-center - Center alignment
  • .next-link-full, .prev-link-full - Full width

Custom Styling

You can override styles by adding custom CSS:

.next-link,
.prev-link {
  /* Your custom styles */
  background: #your-color;
  border-radius: 12px;
}

.nav-links-container {
  /* Custom container styles */
  gap: 2rem;
}

Examples

Blog Chapter Navigation (Both Directions)

<div class="chapter-navigation">
  


















  
  <div class="nav-links-container">
    <a href="/blog/part-1/" class="prev-link prev-link-left ">
      <span class="prev-text">Previous Chapter</span>
      <span class="prev-arrow"></span>
    </a>
    <a href="/blog/part-3/" class="next-link next-link-right ">
      <span class="next-text">Next Chapter</span>
      <span class="next-arrow"></span>
    </a>
  </div>
 
</div>

<div class="chapter-navigation">
  


















  
  <a href="/blog/part-2/" class="next-link next-link-right ">
    <span class="next-text">Next Chapter</span>
    <span class="next-arrow"></span>
  </a>
 
</div>

<div class="chapter-navigation">
  


















  
  <a href="/blog/part-1/" class="prev-link  ">
    <span class="prev-text">Previous Chapter</span>
    <span class="prev-arrow"></span>
  </a>
 
</div>

Multi-language Blog


  


















  
  <div class="nav-links-container">
    <a href="/blog/previous/" class="prev-link prev-link-left ">
      <span class="prev-text">Continue Reading</span>
      <span class="prev-arrow"></span>
    </a>
    <a href="/blog/next/" class="next-link next-link-right ">
      <span class="next-text">Continue Reading</span>
      <span class="next-arrow"></span>
    </a>
  </div>

Custom Styled Navigation




















  
  <div class="nav-links-container">
    <a href="/prev-chapter/" class="prev-link prev-link-left my-custom-nav-link">
      <span class="prev-text">Go Back</span>
      <span class="prev-arrow"></span>
    </a>
    <a href="/next-chapter/" class="next-link next-link-right my-custom-nav-link">
      <span class="next-text">Read the Next Part</span>
      <span class="next-arrow"></span>
    </a>
  </div>

Accessibility

The component includes:

  • Proper semantic HTML structure
  • Hover and focus states
  • Keyboard navigation support
  • Screen reader friendly text

Browser Support

  • Modern browsers (Chrome, Firefox, Safari, Edge)
  • CSS Grid and Flexbox support required
  • Graceful degradation for older browsers

© 2025, Ramin Firoozye. All rights reserved.