Navigation at the End of the Page #1132

Closed
opened 2026-02-04 23:54:59 +03:00 by OVERLORD · 21 comments
Owner

Originally created by @blackshrub on GitHub (Apr 9, 2019).

It is better if there is a prev-next button at the end of every page rather than to navigate from the left sidebar. Prev-next button is more mobile-friendly.

Originally created by @blackshrub on GitHub (Apr 9, 2019). It is better if there is a prev-next button at the end of every page rather than to navigate from the left sidebar. Prev-next button is more mobile-friendly.
OVERLORD added the 🛠️ Enhancement🎨 Design💆 UX labels 2026-02-04 23:54:59 +03:00
Author
Owner

@ssddanbrown commented on GitHub (Apr 9, 2019):

Thanks for the suggestion @blackshrub.
I'm surprised this has not been requested before tbh.

I guess the last page within a chapter should have a next button back to the chapter. Same for last chapter within a book, but returning to the book-level.

@ssddanbrown commented on GitHub (Apr 9, 2019): Thanks for the suggestion @blackshrub. I'm surprised this has not been requested before tbh. I guess the last page within a chapter should have a next button back to the chapter. Same for last chapter within a book, but returning to the book-level.
Author
Owner

@ssddanbrown commented on GitHub (Sep 1, 2019):

Merged Matching Issue

Originally posted by @Wookbert:

Describe the feature you'd like
The name and UI concept clearly implies to organize your information in books with chapters and pages. Reading a book however comes with the experience and convenience of continuous reading through a simple page turn. This does not only apply for paper books, but also has been mimicked on any eBook reader.

On BookStack I'm missing this convenience however so far. Yes, we do have the Book Navigation in the left side panel next to the current page (hereunder; which BTW only follows your scrolling and thus is always in instant reach, if the browser window is wide enough, so that there’s enough space for a right side panel as well), but that’s just not as convenient as a simple page turn.

image

I therefore suggest to additionally place four buttons between the end of the page and the comments section:

  • Previous chapter (jumps to first page thereof)
  • Previous page
  • Next page
  • Next chapter (jumps to first page thereof)

Here’s a quick mockup of how that could look:

image

Further behaviour

  • Buttons are ghosted if there is no previous/next chapter/page.
  • Buttons could be hidden entirely if there is just a single page (UX consistency?). (Hide chapter buttons if there aren’t any chapters??)

Discussion: Floating navigation?
Another concept might be to have this navigation with its 4 buttons visible not only when reaching the end of the page, but instead visible and thus accessible at all times, so one can e.g. jump to the next page, even if one’s only half-way through a long page. The preferable place for such a floating navigation would be the bottom of the window IMO.

The problem I see in this approach however is the waste of screen real estate. A solution to this problem could be to make the navigation only appear (instantly) when a) the mouse pointer gets moved to the lower something pixels at the window or b) one scrolls to the very end of the screen.

@ssddanbrown commented on GitHub (Sep 1, 2019): # Merged Matching Issue Originally posted by @Wookbert: **Describe the feature you'd like** The name and UI concept clearly implies to organize your information in books with chapters and pages. Reading a book however comes with the experience and convenience of continuous reading through a simple page turn. This does not only apply for paper books, but also has been mimicked on any eBook reader. On BookStack I'm missing this convenience however so far. Yes, we do have the Book Navigation in the left side panel next to the current page (hereunder; which BTW only follows your scrolling and thus is always in instant reach, if the browser window is wide enough, so that there’s enough space for a right side panel as well), but that’s just not as convenient as a simple page turn. ![image](https://user-images.githubusercontent.com/3104762/64079875-9d4e9880-cced-11e9-9eb4-b687fd7a9f5d.png) I therefore suggest to additionally place four buttons between the end of the page and the comments section: - Previous chapter (jumps to first page thereof) - Previous page - Next page - Next chapter (jumps to first page thereof) Here’s a quick mockup of how that could look: ![image](https://user-images.githubusercontent.com/3104762/64079956-c58ac700-ccee-11e9-9160-41dafc1b3022.png) **Further behaviour** - Buttons are ghosted if there is no previous/next chapter/page. - Buttons could be hidden entirely if there is just a single page (UX consistency?). (Hide chapter buttons if there aren’t any chapters??) **Discussion: Floating navigation?** Another concept might be to have this navigation with its 4 buttons visible not only when reaching the end of the page, but instead visible and thus accessible at all times, so one can e.g. jump to the next page, even if one’s only half-way through a long page. The preferable place for such a floating navigation would be the bottom of the window IMO. The problem I see in this approach however is the waste of screen real estate. A solution to this problem could be to make the navigation only appear (instantly) when a) the mouse pointer gets moved to the lower something pixels at the window or b) one scrolls to the very end of the screen.
Author
Owner

@ssddanbrown commented on GitHub (Sep 1, 2019):

Thanks for the design ideas @Wookbert,

I'd prefer not have a floating nav. I've tried to limit floating or dynamically appearing elements as much as possible in BookStack, unless there's large benefit gain, to keep focus on the content.

In regards to your design, I'm not sure just using arrows alone in that manner will work. They'd be fine if the content within a book/chapter is always sequential, or has order to it, but that's a large assumption I'm not sure we can make about everyone's use.

I think that muted links, showing the page/chapter name, could be universally better since it'll provide instant context regarding where the user will be led.

@ssddanbrown commented on GitHub (Sep 1, 2019): Thanks for the design ideas @Wookbert, I'd prefer not have a floating nav. I've tried to limit floating or dynamically appearing elements as much as possible in BookStack, unless there's large benefit gain, to keep focus on the content. In regards to your design, I'm not sure just using arrows alone in that manner will work. They'd be fine if the content within a book/chapter is always sequential, or has order to it, but that's a large assumption I'm not sure we can make about everyone's use. I think that muted links, showing the page/chapter name, could be universally better since it'll provide instant context regarding where the user will be led.
Author
Owner

@Wookbert commented on GitHub (Sep 2, 2019):

Here’s a mockup of how a „floating“ navigation bar could look like. The term floating is a bit misleading IMO, as it would sit at the bottom of the window. And again: I wouldn't have it present at all times, but only appear when needed/triggered. So again, that would be:

a) the mouse pointer gets moved to the lower something pixels of the window and
b) one scrolls to the very end of the page (not end of screen), so it should appear as soon as the end of the book page is reached, before the comments come into sight.

Note that while the bottom bar is full width, the chapter buttons align with the left/right edge of the actual, white book page. I also wouldn't probably use any fancy animation to make the bar appear/disappear (such as sliding in/out from the bottom) as it might become annoyingly interrupt the user’s „flow“. Rapid fading perhaps at best.

image

@Wookbert commented on GitHub (Sep 2, 2019): Here’s a mockup of how a „floating“ navigation bar could look like. The term floating is a bit misleading IMO, as it would sit at the bottom of the window. And again: I wouldn't have it present at all times, but only appear when needed/triggered. So again, that would be: a) the mouse pointer gets moved to the lower something pixels of the window and b) one scrolls to the very end of the page (not end of screen), so it should appear as soon as the end of the book page is reached, before the comments come into sight. Note that while the bottom bar is full width, the chapter buttons align with the left/right edge of the actual, white book page. I also wouldn't probably use any fancy animation to make the bar appear/disappear (such as sliding in/out from the bottom) as it might become annoyingly interrupt the user’s „flow“. Rapid fading perhaps at best. ![image](https://user-images.githubusercontent.com/3104762/64082239-32608a00-cd0c-11e9-8254-4569ec71d540.png)
Author
Owner

@Wookbert commented on GitHub (Sep 2, 2019):

I think that muted links, showing the page/chapter name, could be universally better since it'll provide instant context regarding where the user will be led.

@ssddanbrown Can you describe this in detail or with an example? (I don't understand what you mean). My arrows clearly follow the book concept, with its chapters and pages. Online book pages of course can be linked into any direction and order, but that’s what we IMO have a) optional inline links (on the book pages) and b) the book navigation in the left side panel for.

@Wookbert commented on GitHub (Sep 2, 2019): > I think that muted links, showing the page/chapter name, could be universally better since it'll provide instant context regarding where the user will be led. @ssddanbrown Can you describe this in detail or with an example? (I don't understand what you mean). My arrows clearly follow the book concept, with its chapters and pages. Online book pages of course can be linked into any direction and order, but that’s what we IMO have a) optional inline links (on the book pages) and b) the book navigation in the left side panel for.
Author
Owner

@james-geiger commented on GitHub (Oct 9, 2019):

I've implemented something similar through a fairly hacky front end method to get basic previous/next article buttons at the end of each content page. However, this would obviously be more extensible if it was created in the view template with Blade.

I'm thinking @ssddanbrown would prefer that the links/buttons to navigate through the pages would, instead of just an icon or static text, include the chapter name and page name for the user in a contextual button, perhaps at the end of the page content.

<button>
    <span>Blue Chapter</span>
    <span>Navy Blue</span>
</button>

Hacky method:

<script>
	document.addEventListener("DOMContentLoaded", function() {
		if (window.location.pathname.indexOf("page")) {
			var pages = document.querySelectorAll("a.page"),
				current = document.querySelector("a.selected"),
				currentIndex = Array.prototype.indexOf.call(pages, current);

			if (pages.item(currentIndex - 1) != null) {
				var prevPageEl = document.createElement("a"),
					prevPageText = document.createTextNode("Previous Article");
				prevPageEl.appendChild(prevPageText);
				prevPageEl.href = pages.item(currentIndex - 1);
				prevPageEl.classList.add("prev-page-button");
				document.querySelector(".page-content").appendChild(prevPageEl)
			}

			if (pages.item(currentIndex + 1) != null) {
				var nextPageEl = document.createElement("a"),
					nextPageText = document.createTextNode("Next Article");

				nextPageEl.appendChild(nextPageText);
				nextPageEl.href = pages.item(currentIndex + 1)
				nextPageEl.classList.add("next-page-button")
				document.querySelector(".page-content").appendChild(nextPageEl)
			}
		}
	});
</script>
@james-geiger commented on GitHub (Oct 9, 2019): I've implemented something similar through a fairly hacky front end method to get basic previous/next article buttons at the end of each content page. However, this would obviously be more extensible if it was created in the view template with Blade. I'm thinking @ssddanbrown would prefer that the links/buttons to navigate through the pages would, instead of just an icon or static text, include the chapter name and page name for the user in a contextual button, perhaps at the end of the page content. ``` <button> <span>Blue Chapter</span> <span>Navy Blue</span> </button> ``` Hacky method: ``` <script> document.addEventListener("DOMContentLoaded", function() { if (window.location.pathname.indexOf("page")) { var pages = document.querySelectorAll("a.page"), current = document.querySelector("a.selected"), currentIndex = Array.prototype.indexOf.call(pages, current); if (pages.item(currentIndex - 1) != null) { var prevPageEl = document.createElement("a"), prevPageText = document.createTextNode("Previous Article"); prevPageEl.appendChild(prevPageText); prevPageEl.href = pages.item(currentIndex - 1); prevPageEl.classList.add("prev-page-button"); document.querySelector(".page-content").appendChild(prevPageEl) } if (pages.item(currentIndex + 1) != null) { var nextPageEl = document.createElement("a"), nextPageText = document.createTextNode("Next Article"); nextPageEl.appendChild(nextPageText); nextPageEl.href = pages.item(currentIndex + 1) nextPageEl.classList.add("next-page-button") document.querySelector(".page-content").appendChild(nextPageEl) } } }); </script> ```
Author
Owner

@Wookbert commented on GitHub (Oct 10, 2019):

Some CSS formatting to the hack would be nice. When Previous and Next are both shown, they touch each other. Or does this bit also belong to the HTML header!?

<button> <span>Blue Chapter</span> <span>Navy Blue</span> </button>

Bildschirmfoto 2019-10-10 um 16 44 06

@Wookbert commented on GitHub (Oct 10, 2019): Some CSS formatting to the hack would be nice. When Previous and Next are both shown, they touch each other. Or does this bit also belong to the HTML header!? `<button> <span>Blue Chapter</span> <span>Navy Blue</span> </button>` ![Bildschirmfoto 2019-10-10 um 16 44 06](https://user-images.githubusercontent.com/3104762/66586116-64290400-eb88-11e9-9c2d-d425c1b31800.png)
Author
Owner

@james-geiger commented on GitHub (Oct 10, 2019):

Hi @Wookbert,

I've applied some basic CSS to the buttons using the following:

.prev-page-button {
  display: inline-block;
  padding: 1em 0;
  width: calc(50% - 1em);
  margin-right: 1em
}

.next-page-button {
  display: inline-block;
  padding: 1em 0;
  width: calc(50% - 1em);
  margin-left: 1em;
  text-align: right
}

It's by no means perfect (for instance, the "next article" button appears in the wrong location when there is no previous article) and I will quite likely update these when I have more time to appear more like buttons instead of links.

The script above applies the .prev-page-button and .next-page-button classes to the links so you can change the styles however you'd like.

@james-geiger commented on GitHub (Oct 10, 2019): Hi @Wookbert, I've applied some basic CSS to the buttons using the following: ``` .prev-page-button { display: inline-block; padding: 1em 0; width: calc(50% - 1em); margin-right: 1em } .next-page-button { display: inline-block; padding: 1em 0; width: calc(50% - 1em); margin-left: 1em; text-align: right } ``` It's by no means perfect (for instance, the "next article" button appears in the wrong location when there is no previous article) and I will quite likely update these when I have more time to appear more like buttons instead of links. The script above applies the .prev-page-button and .next-page-button classes to the links so you can change the styles however you'd like.
Author
Owner

@Wookbert commented on GitHub (Oct 12, 2019):

@james-geiger

Works pretty well, previous page link now left aligned, next page link right aligned. Only problem: If you are on the first page and there is no previous page, the next page link isn't right aligned, but almost centered. Sorry, I have ZERO clues about CSS, else I'd fix it myself.

Bildschirmfoto 2019-10-12 um 09 49 27

@Wookbert commented on GitHub (Oct 12, 2019): @james-geiger Works pretty well, previous page link now left aligned, next page link right aligned. Only problem: If you are on the first page and there is no previous page, the next page link isn't right aligned, but almost centered. Sorry, I have ZERO clues about CSS, else I'd fix it myself. ![Bildschirmfoto 2019-10-12 um 09 49 27](https://user-images.githubusercontent.com/3104762/66697409-a4e26380-ecd5-11e9-971d-b47a2ab72228.png)
Author
Owner

@james-geiger commented on GitHub (Nov 19, 2019):

Hi @Wookbert,

Following up on this as I had some time today to get this worked out.

Looks like this now:

image

You'll have to replace the custom styles and javascript that I'd provided earlier with the contents of the attached file.

custom-head.txt

@ssddanbrown -- Happy to include this in a PR with more BookStack stylings.

@james-geiger commented on GitHub (Nov 19, 2019): Hi @Wookbert, Following up on this as I had some time today to get this worked out. Looks like this now: ![image](https://user-images.githubusercontent.com/15711820/69098649-9dbe1c00-0a1e-11ea-813f-5dfcc946ea26.png) You'll have to replace the custom styles and javascript that I'd provided earlier with the contents of the attached file. [custom-head.txt](https://github.com/BookStackApp/BookStack/files/3860966/custom-head.txt) @ssddanbrown -- Happy to include this in a PR with more BookStack stylings.
Author
Owner

@Sicklou commented on GitHub (Dec 24, 2019):

Any update on this ?
Will be added to a future release ?

@Sicklou commented on GitHub (Dec 24, 2019): Any update on this ? Will be added to a future release ?
Author
Owner

@over-soul commented on GitHub (Apr 15, 2020):

@james-geiger, thanks so much for this! Love it.

@over-soul commented on GitHub (Apr 15, 2020): @james-geiger, thanks so much for this! Love it.
Author
Owner

@orware commented on GitHub (Jul 30, 2020):

+1 on this and I tried out the customization provided by @james-geiger and that does the trick pretty nicely so would be nice to have available as either a default and/or togglable option we can just enable in the Admin Settings area. (Had a coworker ask about it right away right after completing his first book, so definitely seems like it would be a useful feature for users).

@orware commented on GitHub (Jul 30, 2020): +1 on this and I tried out the customization provided by @james-geiger and that does the trick pretty nicely so would be nice to have available as either a default and/or togglable option we can just enable in the Admin Settings area. (Had a coworker ask about it right away right after completing his first book, so definitely seems like it would be a useful feature for users).
Author
Owner

@zachoooo commented on GitHub (Jan 5, 2021):

+1 for this. It seems like an easy feature to add that would make the user experience substantially more intuitive.

@zachoooo commented on GitHub (Jan 5, 2021): +1 for this. It seems like an easy feature to add that would make the user experience substantially more intuitive.
Author
Owner

@Wookbert commented on GitHub (Jan 16, 2021):

+1
@ssddanbrown Why not include @james-geiger’s above code snippet?

Suggestion for further improvement: Shown box surrounding and article title preview (both as in @james-geiger’s screenshot) only optional via system preference check boxes.

@Wookbert commented on GitHub (Jan 16, 2021): +1 @ssddanbrown Why not include @james-geiger’s above [code snippet](1381#issuecomment-555234790)? Suggestion for further improvement: Shown box surrounding and article title preview (both as in @james-geiger’s screenshot) only optional via system preference check boxes.
Author
Owner

@zachoooo commented on GitHub (Jan 16, 2021):

@james-geiger I made some slight modifications to the code you made to display a little bit nicer when both the next and previous page buttons should be shown. This just adds some space and a pipe between them as a separator.

<script>
	document.addEventListener("DOMContentLoaded", function() {
		if (window.location.pathname.indexOf("page")) {
			var pages = document.querySelectorAll("a.page"),
				current = document.querySelector("a.selected"),
				currentIndex = Array.prototype.indexOf.call(pages, current);
			var hasPrevious = pages.item(currentIndex - 1) != null;
			var hasNext = pages.item(currentIndex + 1) != null;
			if (hasPrevious) {
				var prevPageEl = document.createElement("a"),
					prevPageText = document.createTextNode("Previous Page");
				prevPageEl.appendChild(prevPageText);
				prevPageEl.href = pages.item(currentIndex - 1);
				prevPageEl.classList.add("prev-page-button");
				document.querySelector(".page-content").appendChild(prevPageEl)
			}

			if (hasPrevious && hasNext) {
				prevPageEl.after(document.createTextNode(" | "));
			}

			if (hasNext) {
				var nextPageEl = document.createElement("a"),
					nextPageText = document.createTextNode("Next Page");

				nextPageEl.appendChild(nextPageText);
				nextPageEl.href = pages.item(currentIndex + 1)
				nextPageEl.classList.add("next-page-button")
				document.querySelector(".page-content").appendChild(nextPageEl)
			}
		}
	});
</script>

image

@zachoooo commented on GitHub (Jan 16, 2021): @james-geiger I made some slight modifications to the code you made to display a little bit nicer when both the next and previous page buttons should be shown. This just adds some space and a pipe between them as a separator. ```javascript <script> document.addEventListener("DOMContentLoaded", function() { if (window.location.pathname.indexOf("page")) { var pages = document.querySelectorAll("a.page"), current = document.querySelector("a.selected"), currentIndex = Array.prototype.indexOf.call(pages, current); var hasPrevious = pages.item(currentIndex - 1) != null; var hasNext = pages.item(currentIndex + 1) != null; if (hasPrevious) { var prevPageEl = document.createElement("a"), prevPageText = document.createTextNode("Previous Page"); prevPageEl.appendChild(prevPageText); prevPageEl.href = pages.item(currentIndex - 1); prevPageEl.classList.add("prev-page-button"); document.querySelector(".page-content").appendChild(prevPageEl) } if (hasPrevious && hasNext) { prevPageEl.after(document.createTextNode(" | ")); } if (hasNext) { var nextPageEl = document.createElement("a"), nextPageText = document.createTextNode("Next Page"); nextPageEl.appendChild(nextPageText); nextPageEl.href = pages.item(currentIndex + 1) nextPageEl.classList.add("next-page-button") document.querySelector(".page-content").appendChild(nextPageEl) } } }); </script> ``` ![image](https://user-images.githubusercontent.com/1052396/104783208-61796f00-573a-11eb-8a1a-44d155e1540f.png)
Author
Owner

@ssddanbrown commented on GitHub (Jan 16, 2021):

Sorry for my lack of feedback here.

@Wookbert I would be happy to consider a pull request for this feature, based on that, but with the following considerations:

  • The code should be built-in, not JS driven.
  • The links are not cards, but somewhat muted links.
  • The links are below/outside the main content body (But can be above comments).
  • There are no options/preferences provided for this feature.
  • No wording of "Articles", Use BookStack conventions instead if required (Page, Chapter, Book etc...).

Some things that would make a PR be reviewed swiftly (Happy to provide guidance):

  • Translations considered
  • Tests written
  • RTL considered (Logical properties used instead of left/right in CSS)
  • Permissions considered
@ssddanbrown commented on GitHub (Jan 16, 2021): Sorry for my lack of feedback here. @Wookbert I would be happy to consider a pull request for this feature, based on that, but with the following considerations: - The code should be built-in, not JS driven. - The links are not cards, but somewhat muted links. - The links are below/outside the main content body (But can be above comments). - There are no options/preferences provided for this feature. - No wording of "Articles", Use BookStack conventions instead if required (Page, Chapter, Book etc...). Some things that would make a PR be reviewed swiftly (Happy to provide guidance): - Translations considered - Tests written - RTL considered ([Logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) used instead of left/right in CSS) - Permissions considered
Author
Owner

@Wookbert commented on GitHub (Jan 16, 2021):

@zachoooo: Mind to add a screenshot of your design mod for comparison to James Geiger’s design?

@james-geiger: Seen the requirements for a PR @ssddanbrown just posted here above? Your turn... 🙃

@Wookbert commented on GitHub (Jan 16, 2021): @zachoooo: Mind to add a screenshot of your design mod for comparison to James Geiger’s design? @james-geiger: Seen the requirements for a PR @ssddanbrown just posted here above? Your turn... 🙃
Author
Owner

@james-geiger commented on GitHub (Jan 16, 2021):

Hey folks, appreciate the response and thoughtful analysis by @ssddanbrown.

I'm happy to begin work on a PR, but as I alluded in previous comments and as confirmed by Dan, the code snippet I provided here as a proof of concept has a number of underlying assumptions that would need to be met in the code. It appears simple on the surface but would actually touch many different parts of the codebase.

The area that I'm least familiar is permissions and would likely need guidance there to keep things clean and secure.

So, the design/test/implementation phases will certainly take time to get right.

@james-geiger commented on GitHub (Jan 16, 2021): Hey folks, appreciate the response and thoughtful analysis by @ssddanbrown. I'm happy to begin work on a PR, but as I alluded in previous comments and as confirmed by Dan, the code snippet I provided here as a proof of concept has a number of underlying assumptions that would need to be met in the code. It appears simple on the surface but would actually touch many different parts of the codebase. The area that I'm least familiar is permissions and would likely need guidance there to keep things clean and secure. So, the design/test/implementation phases will certainly take time to get right.
Author
Owner

@ssddanbrown commented on GitHub (Feb 2, 2021):

@james-geiger Just an FYI, As I wouldn't want you to waste any time, https://github.com/BookStackApp/BookStack/pull/2511 has been opened. (Have not reviewed it yet)

@ssddanbrown commented on GitHub (Feb 2, 2021): @james-geiger Just an FYI, As I wouldn't want you to waste any time, https://github.com/BookStackApp/BookStack/pull/2511 has been opened. _(Have not reviewed it yet)_
Author
Owner

@ssddanbrown commented on GitHub (May 29, 2021):

As discussed/shown in #2511, this feature has now been included and will be part of the next feature release.

@ssddanbrown commented on GitHub (May 29, 2021): As discussed/shown in #2511, this feature has now been included and will be part of the next feature release.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#1132