Back

Back

Back

Browser History Back Button

Browser History Back Button

Page Contents

Page Contents

Page Contents

Make anything a back/previous page button with this overide, makes use of the browser history effectivly.
Make anything a back/previous page button with this overide, makes use of the browser history effectivly.
Make anything a back/previous page button with this overide, makes use of the browser history effectivly.

Make anything a back/previous page button with this overide, makes use of the browser history effectivly.

This one’s an easy fix! Want to add a back button—maybe as a component—without needing to set the URL every time you add it?

This handy override can be applied to any element or component and uses the browser's history to take the user back to the previous page.

Design it once, add the override, and you’re done. Easy as that. You’re welcome!

If you are not sure how to add code to Framer watch this quick video.

Framer Code Component

Browser History Back Button

1.0

1.0

1.0

1.0

// A custom Framer code override by Chris Kellett - Framerverse
// Get more components at www.framerverse.com
// Previous Page Overide
// Version 1.0

import { ComponentType } from "react"

/**
 * This override adds a click handler to go back in browser history
 * @param Component - The component to apply the override to
 * @returns A component with the history back functionality
 */
export function withHistoryBack(Component): ComponentType {
    // This part runs once when creating the override
    return (props) => {
        // This function handles the actual navigation
        const handleGoBack = () => {
            // Check if we can go back in history
            if (window.history.length > 1) {
                window.history.back()
            } else {
                // If no history exists, log a message
                console.log("No previous page in history")
            }
        }

        // Return the component with our click handler
        return <Component {...props} onClick={handleGoBack} />
    }
}

CLICK TO COPY

// A custom Framer code override by Chris Kellett - Framerverse
// Get more components at www.framerverse.com
// Previous Page Overide
// Version 1.0

import { ComponentType } from "react"

/**
 * This override adds a click handler to go back in browser history
 * @param Component - The component to apply the override to
 * @returns A component with the history back functionality
 */
export function withHistoryBack(Component): ComponentType {
    // This part runs once when creating the override
    return (props) => {
        // This function handles the actual navigation
        const handleGoBack = () => {
            // Check if we can go back in history
            if (window.history.length > 1) {
                window.history.back()
            } else {
                // If no history exists, log a message
                console.log("No previous page in history")
            }
        }

        // Return the component with our click handler
        return <Component {...props} onClick={handleGoBack} />
    }
}

CLICK TO COPY

// A custom Framer code override by Chris Kellett - Framerverse
// Get more components at www.framerverse.com
// Previous Page Overide
// Version 1.0

import { ComponentType } from "react"

/**
 * This override adds a click handler to go back in browser history
 * @param Component - The component to apply the override to
 * @returns A component with the history back functionality
 */
export function withHistoryBack(Component): ComponentType {
    // This part runs once when creating the override
    return (props) => {
        // This function handles the actual navigation
        const handleGoBack = () => {
            // Check if we can go back in history
            if (window.history.length > 1) {
                window.history.back()
            } else {
                // If no history exists, log a message
                console.log("No previous page in history")
            }
        }

        // Return the component with our click handler
        return <Component {...props} onClick={handleGoBack} />
    }
}

CLICK TO COPY

What is it?

Make anything a back/previous page button with this overide, makes use of the browser history effectivly.

What is it?

Make anything a back/previous page button with this overide, makes use of the browser history effectivly.

What is it?

Make anything a back/previous page button with this overide, makes use of the browser history effectivly.

How to use.

Click in the code are below to copy the code to your clipboard. Then click the 'plus' button int the assets panel for 'Code'. Choose if its an overide or Component. Paste the code in and save.

How to use.

Click in the code are below to copy the code to your clipboard. Then click the 'plus' button int the assets panel for 'Code'. Choose if its an overide or Component. Paste the code in and save.

How to use.

Click in the code are below to copy the code to your clipboard. Then click the 'plus' button int the assets panel for 'Code'. Choose if its an overide or Component. Paste the code in and save.

Usage Licence

I'm happy for you to use this code in your projects, even templates. If you use it please keep my accreditation in the code. Please don't sell it as your own. (Hover for full licence).

Usage Licence

I'm happy for you to use this code in your projects, even templates. If you use it please keep my accreditation in the code. Please don't sell it as your own. (Hover for full licence).

Usage Licence

I'm happy for you to use this code in your projects, even templates. If you use it please keep my accreditation in the code. Please don't sell it as your own. (Hover for full licence).

Change Log

// Version 1.0

Figma to Framer

Support

If you need support first watch the help video above. If that does not help reach out to me on one of my social channels or use the contact form. As I am a team of one it may take a short while to get back to you. Please be patient, thanks.

Hope this helps. Good luck with your project.

More Framer resources.

Add a fully functional, responsive, configurable loan calculator to your project.

Real Loan Calculator

Add a fully functional, responsive, configurable loan calculator to your project.

Section

Add a fully functional, responsive, configurable loan calculator to your project.

Real Loan Calculator

Add a fully functional, responsive, configurable loan calculator to your project.

Section

Add a fully functional, responsive, configurable loan calculator to your project.

Real Loan Calculator

Add a fully functional, responsive, configurable loan calculator to your project.

Section

If your site works better in one orientation than another why not let your users know with this little component.

Mobile Rotation Alert

If your site works better in one orientation than another why not let your users know with this little component.

Code Component

If your site works better in one orientation than another why not let your users know with this little component.

Mobile Rotation Alert

If your site works better in one orientation than another why not let your users know with this little component.

Code Component

If your site works better in one orientation than another why not let your users know with this little component.

Mobile Rotation Alert

If your site works better in one orientation than another why not let your users know with this little component.

Code Component

A niche component for creating a swirling Starfield, simple but great in the right scenario (like this site).

Starfield Generator

A niche component for creating a swirling Starfield, simple but great in the right scenario (like this site).

Code Component

A niche component for creating a swirling Starfield, simple but great in the right scenario (like this site).

Starfield Generator

A niche component for creating a swirling Starfield, simple but great in the right scenario (like this site).

Code Component

A niche component for creating a swirling Starfield, simple but great in the right scenario (like this site).

Starfield Generator

A niche component for creating a swirling Starfield, simple but great in the right scenario (like this site).

Code Component

Use this component and overide combo to create a swipe toggle that switches component variants.

Swipe Variant Changer

Use this component and overide combo to create a swipe toggle that switches component variants.

Code Override

Use this component and overide combo to create a swipe toggle that switches component variants.

Swipe Variant Changer

Use this component and overide combo to create a swipe toggle that switches component variants.

Code Override

Use this component and overide combo to create a swipe toggle that switches component variants.

Swipe Variant Changer

Use this component and overide combo to create a swipe toggle that switches component variants.

Code Override

Use a URL parameter to change the variant on the page you link to.

Change Variants with URL Parameters

Use a URL parameter to change the variant on the page you link to.

Code Override

Use a URL parameter to change the variant on the page you link to.

Change Variants with URL Parameters

Use a URL parameter to change the variant on the page you link to.

Code Override

Use a URL parameter to change the variant on the page you link to.

Change Variants with URL Parameters

Use a URL parameter to change the variant on the page you link to.

Code Override

Need a simple documentation system? This component adds auto linking contents list to a one page document system.

Simple Documentation Maker

Need a simple documentation system? This component adds auto linking contents list to a one page document system.

Code Component

Need a simple documentation system? This component adds auto linking contents list to a one page document system.

Simple Documentation Maker

Need a simple documentation system? This component adds auto linking contents list to a one page document system.

Code Component

Need a simple documentation system? This component adds auto linking contents list to a one page document system.

Simple Documentation Maker

Need a simple documentation system? This component adds auto linking contents list to a one page document system.

Code Component