New directional_navigation_overrides example combining auto dir nav w/ manual overrides

[kfc35]

Objective

• Fixes bevy_input_focus: No example demonstrates how to use the DirectionalNavigationMap and automatic navigation together #22299

Solution

• Creates a new example called directional_navigation_overrides (examples/ui/navigation/directional_navigation_overrides.rs) that demonstrates both auto navigation and manually defining edges via the DirectionalNavigationMap. The example uses the previous auto navigation example (now at examples/ui/navigation/directional_navigation.rs) as a base. It creates pages of AutoDirectionalNavigation buttons depicting different scenarioes where manual navigation is needed to create a desired experience.
• Refactors the navigation examples like @it-me-joda into a subfolder. Renamed the examples to express their purpose, and removed the purely manual nav example since it is not useful anymore.

Testing

• The example runs great cargo run --example directional_navigation_overrides. Screen recording attached.
• The other example still runs via cargo run --example directional_navigation

Showcase

Screen Recording

Screen.Recording.2026-01-13.at.1.46.09.AM.mov

[it-me-joda]

I think that I personally would rather have each navigation mode in a separate example. Then maybe a third that demonstrates that you could combine them? This current state is overwhelming at first glance. I think I would have examples like:

ui/navigation/
    auto-navigation
    manual-navigation
    combined-navigation

But that's just my personal opinion. I'd be curious to see what others think about it.

[alice-i-cecile]

I agree with @it-me-joda here, with the emphasis in the third example focusing on how and why to use overrides.

[kfc35]

Alrighty this is ready for review again! I refactored the navigation examples, tried to make a clear example where combined navigation is best suited, and put in the update_focus_display change (although the memory leak has been merged to main since then).

I updated the screen recording with this example in the first comment. Basically it is now three pages of buttons where transitions between pages and rows is and must be set up manually, but all other navigation is via the automatic system.

[viridia]

One of the motivations for manual navigation is to resolve ambiguities in automatic navigation. Consider the following:

A --- B
 \   /
  \ /
   C

          D

In this example, we might want D to be reachable from C in both the "down" and "right" direction. So while auto navigation will be sufficient for A B and C, we may want to add additional manual links from C to D.

[kfc35]

One of the motivations for manual navigation is to resolve ambiguities in automatic navigation. Consider the following:

A --- B
 \   /
  \ /
   C

          D

In this example, we might want D to be reachable from C in both the "down" and "right" direction. So while auto navigation will be sufficient for A B and C, we may want to add additional manual links from C to D.

Thanks for this! I’ll try to fit something like this in the example, probably as a separate bespoke page of buttons depicting this (or replacing one of the pages with this scenario)

[kfc35]

I incorporated @viridia ’s scenario as the page 2 of buttons ,and I inverted vertical navigation in page 3 to demonstrate a whimsy override.

The updated screen recording (which is also available in the description) is here

Screen.Recording.2026-01-13.at.1.46.09.AM.mov

[alice-i-cecile]

Okay, this is starting to look good!

There's a few notes on pedagogical structure:

1. Automatic directional navigation should be the default for 99% of users; the example should be renamed to simply directional_navigation.
2. Now that it exists, the manual_navigation example is misleading: no one should be doing this. It should be removed completely.
3. The primary point of manual navigation is now for overriding edge cases produced by automatic directional navigation. The example name and module docs providing context should be reworked to reflect that; perhaps directional_navigation_overrides.rs?

The setup and content of the new example are quite nice though; I have no complaints there! Lots of boilerplate to set up the complex layout, but I'm happy with how clear it is.

[kfc35]

@alice-i-cecile I agree with your structure notes and implemented them. directional_navigation_overrides.rs sounds fine if not long, but could not think of a better name

I also went over the comments in the modules and updated them to the best of my ability to make the recommended uses clearer and the interactions with each other

I’m happy with the example now too :) feels comprehensive