Adding back button to the PWA

Feature Requests
1

I’ve installed the PWA (Chrome, Windows 11) but it doesn’t show any of the browser navigation buttons. It means there’s no back button which makes the usability of the PWA really tricky. Other users have said this too. Is there a way of adding a back button somewhere in the title bar? And if you’re doing that, perhaps a refresh button too?

1 Like
2

Are you using our breadcrumbs (enabled by default)?

These should help you navigate back to where you were

image
image934×280 11.8 KB

The main strength of a PWA is that it doesn’t feel like a browser, but you can still use browser shortcuts to navigate around the app.

That said, thank you for the feedback, we’ll definitely keep it in mind if we’e making changes in this area

3

We use the breadcrumbs but also CTRL + :arrow_left: on Windows machines if it helps any.

4

I get ctrl left, but it’s still a faff for those in the team that don’t know about it. It’s another thing they need to learn / know about.

We don’t use breadcrumbs as I have pages (typically record views) which are hidden from navigation. Users view the record ok, but (unless I’ve missed something) the breadcrumb will take people back to the hidden record (which is the list of all the records I don’t want people to see).

For example:

Someone looks at a project. The revenue breakdown is in a collection with each month in a new row. They can click on the row and they see a page which shows the detail of that month (eg weeks, people etc). I don’t want them to then navigate using the breadcrumbs to a page that shows all the months from all the projects in one place. It’s not useful. I want them to go back to the project overview.

Perhaps an option to set where the breadcrumb points to / from? Not sure how that would work though.

Anyway, it’s not the biggest issue, but sharing in case it’s useful.

Thanks!

5

Could you perhaps create a custom navigation button and set the page or url to whatever you needed?

Again, bit of a messy way to do it but workable short term.

6

Hmm, good suggestion. I could do, but it’s a bit of a faff.

Will probably suggest people just use the browser - much easier!

7

We struggled with this before too (Breadcrumps weren’t an option) and we used some custom Buttons for a while. We stopped using them because they would be in the way too much but if you make them movable for example it might be a good option.

Thats the (very basic) Code we used:

Styles:

@media screen and (max-width: 768px) {
    .nav-button {
      width: 50px;
      height: 50px;
      position: absolute;
      bottom: 10px;
      font-size: 24px;
      text-align: center;
      line-height: 50px;
      border: none;
      background-color: #f1f1f1;
      cursor: pointer;
      z-index: 999; /* Ensure the buttons are above other elements */
    }

    #prev {
      right: 70px; /* Adjusted to create 10px space between buttons */
    }

    #next {
      right: 10px; /* Position the next button at the right edge */
    }
  }```

Code: 

<button id="prev" class="nav-button" onclick="history.back()">←</button>

<button id="next" class="nav-button" onclick="history.forward()">→</button>
1 Like