Arrow down navigation

[scaleoutsean]

An answer https://github.com/orgs/marp-team/discussions/158#discussioncomment-1274628 how to link to other pages, so that's helpful.

But how to set up "arrow down" navigation?

Example:

1 -> 2 -> 5

     |
     |
     v

     3

     |
     |
     v

     4 # link to slide 5

I can use the link feature (link at the top) to get from 4 to 5 without using "up arrow", but clicking on a link on every slide (meaning, 2 and 3) to replace "down arrow" seems a bit inconvenient and unnatural.

I've checked the issues in all the different Marp-related repos for "navigation" and "arrow" but I haven't seen any questions or feature enhancements related to this "down arrow" navigation challenge.

[yhatt]

Your description seems to include a concept of vertical slides (like reveal.js's Vertical Slides) that does not exist in Marp. Marp always outputs slide pages in a single direction, so that description might be a bit difficult to understand.

If you could provide a sample Marp Markdown with some pages and explain what you want to achieve, it would help maintainers and the community understand your intent and provide specific advice.

[scaleoutsean]

Thank you for helping out. And yes, that is correct, I was thinking about the "vertical slides" features that some Web presentation solutions have.

Example with sample content:

• Python - History
• Python - Language introduction
• Python - Significant contributors
  • Vertical slide 1 - Guido
  • Vertical slide 2 - Fred Drake
• Python - Distributions
• Python - Conclusion

My use case is vertical slides exist in case someone asks detailed questions. Also, I don't mind if PDF output contains all slides.

Consider this scenario:

• Someone may ask questions about Guido and early contributors, but maybe they will not
• If you include all slides in the usual "sequential" deck, you may have 90 slides for a 30 minute session

Then, obviously, you have to quickly scroll through many slides which you don't want to share.

Or you create multiple versions of your presentation (depending on length of time available and audience), maybe using markdown-include to avoid having to physically include or exclude slides for every meeting. Even that does not fully solve the problem, as you can exclude a slide on Fred, and someone might ask about Fred.

I guess, in Marp, the default flow would have to remain "horizontal" (so "vertical slides are shown in sequence and exported in usual sequence) and using URL links to skip "vertical" slides would be an approach that would not require any changes.
The only inconvenient part about that for me would be: I'd have to click on these "skip to next horizontal slide" link many times if no one asks to see content in "vertical" slides.

Maybe an approach with hidden bookmarks in the form of a plugin would work well here:

• still URL links, but always to the next "horizontal" slide
• same shortcut key (e.g. SHIFT + ->) that clicks on that link
  Then when I want to skip "vertical" slides I always use the same shortcut and don't have to click on links.
  I don't mean to ask you to create one, but whether that would be an elegant way to solve this in Marp?

[yhatt]

I see, I understand what you want to do.

Already described at #141, we have no plans to support vertical slides in Marp, but there is room to support that via a plugin.

For example, Marp (Marpit) plugin can inject a <script> tag into the end of the HTML via markdown-it tokens and renderers, to override navigation shortcuts that are provided by Marp CLI's bespoke template.

Example

Skip sub slides when navigated by ← / → keys:

# Concept: **Sub slides** (vertical slides)

- `←` / `→` keys will navigate only main slides
- `↑` / `↓` keys will navigate including sub slides

> Only working on HTML output with `bespoke` template

---

# Slide 1

---

<!-- class: sub -->

## Slide 1.1

---

## Slide 1.2

---

## Slide 1.3

---

<!-- class: "" -->

# Slide 2

---

# Slide 3

---

<!-- class: sub -->

## Slide 3.1

---

## Slide 3.2

<script>
class KeyEventForOriginal extends KeyboardEvent { _original = true; }

function NavigateToNextParent(key) {
  let currentActive, nextActive = document.querySelector('.bespoke-marp-active');

  // Loop until we find a slide without the "sub" class or we return to the original active slide
  do {
    currentActive = nextActive;
    document.dispatchEvent(new KeyEventForOriginal("keydown", { key, _original: true }));
    nextActive = document.querySelector('.bespoke-marp-active');
  } while(currentActive !== nextActive && nextActive.querySelector(':has(section.sub)'));
}

document.addEventListener('keydown', (e) => {
  if (e._original) return; // Prevent handling the inner event

  if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
    e.stopPropagation();
    NavigateToNextParent(e.key);
  }
}, { capture: true }) // Capture phase to handle before Marp's listener

document.currentScript.remove();
</script>

It's just one of the approaches to achieve that, but you can try implementing your own idea.

[scaleoutsean]

Perfect, this is great, also the link with vertical slides issue which is very informative as well.

(I didn't search for "vertical" before posting, but for navigation, down arrow and several other terms. I hope this discussion will make that easier to find now).

I think the approach makes sense and I agree vertical slides have that downside.