How can I add a back button in Webflow?

Hello! I am trying to make a button that sends the user to the previous page. I have implemented this before in custom coded websites, but do not know how to do it in Webflow. Thank you very much

hi @Park_Dalton Webflow doesn’t offer this basic functionality, just use your custom code and use it in site, page or embed element.

you may find some answers in this forum via search input field
https://discourse.webflow.com/search?q=prev%20next%20post

or use Finsweet solution

Hi Park,

Paste `javascript:history.back(-1); in the URL section of the Link block

Publish the site and test :slight_smile:

5 Likes

If I can I will just add clarification, this code is related to history of browser session and not to prev / next . What this mean that if you will land on specific page of your website by clicking link let say from google search, than clicking back button in your article will redirect you back to google search and not to previous article on your website.

Todays code use window instead javascript

javascript-window-history

1 Like

True,

The Finsweet solution you mentioned works perfectly for switching between articles. Still mentioned the JS script if that’s what he was looking for :slight_smile:

Wow, so what’s the difference between using window and javascript to go back?

Learning a lot from your Stan :blue_heart:

1 Like

javascript was used for older browsers compatibility like IE6 and for other was used window. While IE is gone there is no reason to use it as window is supported with all browsers. At least this is how I remember it. :wink:

https://dev.w3.org/html5/spec-LC/history.html

1 Like

Is there a way to keep a filter that was active on the previous page, active when navigating back from a deeper/template page

1 Like

Hello, did you find a solution?

1 Like

This was incredibly helpful! Thank you!

I found a way to detect the last page via breadcrumbs, and if none exist then it will go back to the previous browser page via history. It also displays the name of the previous page! Here is the JS:

<script>
  const breadcrumbLinks = document.querySelectorAll('.breadcrumbs_item a');

  // If there are breadcrumb links, update the span text with the previous page name
  if (breadcrumbLinks.length > 0) {
    const previousPageName = breadcrumbLinks[breadcrumbLinks.length - 1].textContent;
    document.getElementById('backText').textContent = `${previousPageName}`;
    document.getElementById('backLink').href = breadcrumbLinks[breadcrumbLinks.length - 1].href;
  }

  // Optional: add event listener if needed for extra functionality
  document.getElementById('backLink').addEventListener('click', function(event) {
    // You could prevent the default behavior here if necessary:
    // event.preventDefault();
    
    // Example logic to ensure the navigation happens:
    if (breadcrumbLinks.length > 0) {
      window.location.href = breadcrumbLinks[breadcrumbLinks.length - 1].href;
    } else {
      window.history.back(); // Fallback if no breadcrumb links exist
    }
  });
</script>

Here is how my DOM is set up:

I set the back button to only show on mobile, but that is optional.

One thing to note is that I also have breadcrumb schema set up, so I’m not sure if the script will work without the schema. Below is a screenshot of how mine is configured. The section and container is optional.