New navigation example combining auto and manual directional nav

[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 navigation (examples/ui/navigation.rs) that demonstrates both auto navigation and manually defining/overriding edges via the DirectionalNavigationMap. The example basically copies code from the purely auto navigation example (examples/ui/auto_directional_navigation.rs) as a base, changes the grid of buttons in the middle, and adds the manual map configuration.

Testing

• The example runs fine! cargo run --example navigation.
• Horizontal navigation within a row is configured automatically
• Horizontal navigation between rows is configured manually so that it sort of spirals (Row 1 Button 3 + Right = Row 2 Button 1)
• Vertical navigation between rows is configured manually. Its controls are inverted (pressing up goes down) and the navigation wraps (pressing up on a button in bottom most row navigates to the relevant button in top row and vice versa)

Showcase

Screen Recording

Screen.Recording.2026-01-06.at.4.29.42.PM.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.

[ickshonpe]

Text updates are expensive, so better to only update the labels on changes:

Suggested change

	update_focus_display,
	update_focus_display.run_if(|input_focus: Res<InputFocus>| input_focus.is_changed()),,

It's not that much text, but atm there is a bug where a new font is created every text update (#22419). After leaving the example running for a while, you'll see a significant delay in moving the cursor.