diff --git a/Cargo.toml b/Cargo.toml
index dd904e1217590..c369b3eccd383 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -5081,25 +5081,25 @@ wasm = true
 
 [[example]]
 name = "directional_navigation"
-path = "examples/ui/directional_navigation.rs"
+path = "examples/ui/navigation/directional_navigation.rs"
 # Causes an ICE on docs.rs
 doc-scrape-examples = false
 
 [package.metadata.example.directional_navigation]
 name = "Directional Navigation"
-description = "Demonstration of Directional Navigation between UI elements"
+description = "Demonstration of automatic directional navigation based on UI element positions"
 category = "UI (User Interface)"
 wasm = true
 
 [[example]]
-name = "auto_directional_navigation"
-path = "examples/ui/auto_directional_navigation.rs"
+name = "directional_navigation_overrides"
+path = "examples/ui/navigation/directional_navigation_overrides.rs"
 # Causes an ICE on docs.rs
 doc-scrape-examples = false
 
-[package.metadata.example.auto_directional_navigation]
-name = "Automatic Directional Navigation"
-description = "Demonstration of automatic directional navigation graph generation based on UI element positions"
+[package.metadata.example.directional_navigation_overrides]
+name = "Directional Navigation Overrides"
+description = "Demonstration of automatic directional navigation between UI elements with manual overrides"
 category = "UI (User Interface)"
 wasm = true
 
diff --git a/crates/bevy_input_focus/src/directional_navigation.rs b/crates/bevy_input_focus/src/directional_navigation.rs
index a7b45788d5fe0..9a9da75aff853 100644
--- a/crates/bevy_input_focus/src/directional_navigation.rs
+++ b/crates/bevy_input_focus/src/directional_navigation.rs
@@ -1,4 +1,9 @@
-//! A navigation framework for moving between focusable elements based on directional input.
+//! A manual navigation framework for moving between focusable elements based on directional input.
+//!
+//! Note: If using `bevy_ui`, this manual navigation framework is used to provide overrides
+//! for its automatic navigation framework based on the `AutoDirectionalNavigation` component.
+//! Most times, the automatic navigation framework alone should be sufficient.
+//! If not using `bevy_ui`, this manual navigation framework can still be used by itself.
 //!
 //! While virtual cursors are a common way to navigate UIs with a gamepad (or arrow keys!),
 //! they are generally both slow and frustrating to use.
@@ -7,15 +12,15 @@
 //! Like the rest of this crate, the [`InputFocus`] resource is manipulated to track
 //! the current focus.
 //!
+//! This module's [`DirectionalNavigationMap`] stores a directed graph of focusable entities.
+//! Each entity can have up to 8 neighbors, one for each [`CompassOctant`], balancing
+//! flexibility and required precision.
+//!
 //! Navigating between focusable entities (commonly UI nodes) is done by
 //! passing a [`CompassOctant`] into the [`navigate`](DirectionalNavigation::navigate) method
-//! from the [`DirectionalNavigation`] system parameter. Under the hood, an entity is found
-//! automatically via brute force search in the desired [`CompassOctant`] direction.
-//!
-//! If some manual navigation is desired, a [`DirectionalNavigationMap`] will override the brute force
-//! search in a direction for a given entity. The [`DirectionalNavigationMap`] stores a directed graph
-//! of focusable entities. Each entity can have up to 8 neighbors, one for each [`CompassOctant`],
-//! balancing flexibility and required precision.
+//! from the [`DirectionalNavigation`] system parameter. Under the hood, the
+//! [`DirectionalNavigationMap`] is used to return the focusable entity in a direction
+//! for a given entity.
 //!
 //! # Setting up Directional Navigation
 //!
@@ -26,21 +31,26 @@
 //! include automatic navigation, you should also use the `AutoDirectionalNavigator` system parameter
 //! in that crate instead of [`DirectionalNavigation`].
 //!
-//! ## Manual Navigation
-//!
-//! You can also manually define navigation connections using methods like
-//! [`add_edge`](DirectionalNavigationMap::add_edge) and
-//! [`add_looping_edges`](DirectionalNavigationMap::add_looping_edges).
-//!
-//! ## Combining Automatic and Manual
+//! ## Combining Automatic Navigation with Manual Overrides
 //!
 //! Following manual edges always take precedence, allowing you to use
 //! automatic navigation for most UI elements while overriding specific connections for
-//! special cases like wrapping menus or cross-layer navigation.
+//! special cases like wrapping menus or cross-layer navigation. If you need to override
+//! automatic navigation behavior, use the [`DirectionalNavigationMap`] to define
+//! overriding edges between UI entities.
+//!
+//! ## Manual Navigation Only
+//!
+//! Manually define your navigation using the [`DirectionalNavigationMap`], and use the
+//! [`DirectionalNavigation`] system parameter to navigate between components.
+//! You can define navigation connections using methods like
+//! [`add_edge`](DirectionalNavigationMap::add_edge) and
+//! [`add_looping_edges`](DirectionalNavigationMap::add_looping_edges).
 //!
-//! ## When to Use Manual Navigation
+//! ## When to Use Manual Navigation or Manual Overrides
 //!
-//! While automatic navigation is recommended for most use cases, manual navigation provides:
+//! While automatic navigation is recommended and satisfactory for most use cases,
+//! using manual navigation only or integrating manual overrides to automatic navigation provide:
 //!
 //! - **Precise control**: Define exact navigation flow, including non-obvious connections like looping edges
 //! - **Cross-layer navigation**: Connect elements across different UI layers or z-index levels
@@ -122,6 +132,7 @@ pub struct AutoNavigationConfig {
     /// Maximum search distance in logical pixels.
     ///
     /// Nodes beyond this distance won't be connected. `None` means unlimited.
+    /// The distance between two UI elements is calculated using their closest edges.
     pub max_search_distance: Option<f32>,
 
     /// Whether to prefer nodes that are more aligned with the exact direction.
@@ -189,6 +200,11 @@ impl NavNeighbors {
 ///
 /// This graph must be built and maintained manually, and the developer is responsible for ensuring that it meets the above criteria.
 /// Notably, if the developer adds or removes the navigability of an entity, the developer should update the map as necessary.
+///
+/// If the automatic navigation system in `bevy_ui` is being used, this resource can be used to specify
+/// manual navigation overrides. Any navigation edges specified in this map take precedence over automatic
+/// navigation. For example, if navigation on one side of the window should wrap around to
+/// the other side of the window, this navigation behavior can be specified using this map.
 #[derive(Resource, Debug, Default, Clone, PartialEq)]
 #[cfg_attr(
     feature = "bevy_reflect",
diff --git a/crates/bevy_ui/src/auto_directional_navigation.rs b/crates/bevy_ui/src/auto_directional_navigation.rs
index a3072e486f443..eb650d0d25896 100644
--- a/crates/bevy_ui/src/auto_directional_navigation.rs
+++ b/crates/bevy_ui/src/auto_directional_navigation.rs
@@ -1,7 +1,21 @@
-//! An automatic directional navigation system, powered by the [`AutoDirectionalNavigation`] component.
+//! An automatic directional navigation system, powered by the [`AutoDirectionalNavigation`]
+//! component.
 //!
-//! [`AutoDirectionalNavigator`] expands on the manual directional navigation system
-//! provided by the [`DirectionalNavigation`] system parameter from `bevy_input_focus`.
+//! Unlike the navigation system provided by `bevy_input_focus`, the automatic directional
+//! navigation system does not require specifying navigation edges. Just simply add the
+//! [`AutoDirectionalNavigation`] component to your entities, and the system will automatically
+//! calculate the navigation edges between entities based on screen position.
+//!
+//! [`AutoDirectionalNavigator`] replaces the manual directional navigation system
+//! provided by the [`DirectionalNavigation`] system parameter from `bevy_input_focus`. The
+//! [`AutoDirectionalNavigator`] will first navigate using manual override edges defined in the
+//! [`DirectionalNavigationMap`](bevy_input_focus::directional_navigation::DirectionalNavigationMap).
+//! If no manual overrides are defined, automatic navigation will occur between entities based on
+//! screen position.
+//!
+//! If any resulting navigation behavior is undesired, [`AutoNavigationConfig`] can be tweaked or
+//! manual overrides can be specified using the
+//! [`DirectionalNavigationMap`](bevy_input_focus::directional_navigation::DirectionalNavigationMap).
 
 use crate::{ComputedNode, ComputedUiTargetCamera, UiGlobalTransform};
 use bevy_camera::visibility::InheritedVisibility;
@@ -72,7 +86,7 @@ use bevy_reflect::{prelude::*, Reflect};
 ///   automatic navigation as needed.
 ///
 /// Manual edges defined via [`DirectionalNavigationMap`](bevy_input_focus::directional_navigation::DirectionalNavigationMap)
-/// are completely independent and will continue to work regardless of this component.
+/// will override any automatically calculated edges.
 ///
 /// # Additional Requirements
 ///
@@ -237,6 +251,11 @@ impl<'w, 's> AutoDirectionalNavigator<'w, 's> {
     }
 }
 
+/// Util used to get the resulting bounds of a UI entity after applying its rotation.
+///
+/// This is necessary to apply because navigation should only use the final screen position
+/// of an entity in automatic navigation calculations. These bounds are used as the entity's size in
+/// [`FocusableArea`].
 fn get_rotated_bounds(size: Vec2, rotation: f32) -> Vec2 {
     if rotation == 0.0 {
         return size;
diff --git a/examples/README.md b/examples/README.md
index 487832ecb3543..5c33a02e2bc8b 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -567,12 +567,12 @@ Example | Description
 Example | Description
 --- | ---
 [Anchor Layout](../examples/ui/anchor_layout.rs) | Shows an 'anchor layout' style of ui layout
-[Automatic Directional Navigation](../examples/ui/auto_directional_navigation.rs) | Demonstration of automatic directional navigation graph generation based on UI element positions
 [Borders](../examples/ui/borders.rs) | Demonstrates how to create a node with a border
 [Box Shadow](../examples/ui/box_shadow.rs) | Demonstrates how to create a node with a shadow
 [Button](../examples/ui/button.rs) | Illustrates creating and updating a button
 [CSS Grid](../examples/ui/grid.rs) | An example for CSS Grid layout
-[Directional Navigation](../examples/ui/directional_navigation.rs) | Demonstration of Directional Navigation between UI elements
+[Directional Navigation](../examples/ui/navigation/directional_navigation.rs) | Demonstration of automatic directional navigation based on UI element positions
+[Directional Navigation Overrides](../examples/ui/navigation/directional_navigation_overrides.rs) | Demonstration of automatic directional navigation between UI elements with manual overrides
 [Display and Visibility](../examples/ui/display_and_visibility.rs) | Demonstrates how Display and Visibility work in the UI.
 [Drag to Scroll](../examples/ui/drag_to_scroll.rs) | This example tests scale factor, dragging and scrolling
 [Feathers Widgets](../examples/ui/feathers.rs) | Gallery of Feathers Widgets
diff --git a/examples/ui/directional_navigation.rs b/examples/ui/directional_navigation.rs
deleted file mode 100644
index 9592ef984743a..0000000000000
--- a/examples/ui/directional_navigation.rs
+++ /dev/null
@@ -1,411 +0,0 @@
-//! Demonstrates how to set up the directional navigation system to allow for navigation between widgets.
-//!
-//! Directional navigation is generally used to move between widgets in a user interface using arrow keys or gamepad input.
-//! When compared to tab navigation, directional navigation is generally more direct, and less aware of the structure of the UI.
-//!
-//! In this example, we will set up a simple UI with a grid of buttons that can be navigated using the arrow keys or gamepad input.
-//!
-//! **Note:** This example shows manual graph construction for full control. For automatic graph generation
-//! based on node positions, see the `auto_directional_navigation` example.
-
-use std::time::Duration;
-
-use bevy::{
-    camera::NormalizedRenderTarget,
-    input_focus::{
-        directional_navigation::{
-            DirectionalNavigation, DirectionalNavigationMap, DirectionalNavigationPlugin,
-        },
-        InputDispatchPlugin, InputFocus, InputFocusVisible,
-    },
-    math::CompassOctant,
-    picking::{
-        backend::HitData,
-        pointer::{Location, PointerId},
-    },
-    platform::collections::{HashMap, HashSet},
-    prelude::*,
-};
-
-fn main() {
-    App::new()
-        // Input focus is not enabled by default, so we need to add the corresponding plugins
-        .add_plugins((
-            DefaultPlugins,
-            InputDispatchPlugin,
-            DirectionalNavigationPlugin,
-        ))
-        // This resource is canonically used to track whether or not to render a focus indicator
-        // It starts as false, but we set it to true here as we would like to see the focus indicator
-        .insert_resource(InputFocusVisible(true))
-        // We've made a simple resource to keep track of the actions that are currently being pressed for this example
-        .init_resource::<ActionState>()
-        .add_systems(Startup, setup_ui)
-        // Input is generally handled during PreUpdate
-        // We're turning inputs into actions first, then using those actions to determine navigation
-        .add_systems(PreUpdate, (process_inputs, navigate).chain())
-        .add_systems(
-            Update,
-            (
-                // We need to show which button is currently focused
-                highlight_focused_element,
-                // Pressing the "Interact" button while we have a focused element should simulate a click
-                interact_with_focused_button,
-                // We're doing a tiny animation when the button is interacted with,
-                // so we need a timer and a polling mechanism to reset it
-                reset_button_after_interaction,
-            ),
-        )
-        // This observer is added globally, so it will respond to *any* trigger of the correct type.
-        // However, we're filtering in the observer's query to only respond to button presses
-        .add_observer(universal_button_click_behavior)
-        .run();
-}
-
-const NORMAL_BUTTON: Srgba = bevy::color::palettes::tailwind::BLUE_400;
-const PRESSED_BUTTON: Srgba = bevy::color::palettes::tailwind::BLUE_500;
-const FOCUSED_BORDER: Srgba = bevy::color::palettes::tailwind::BLUE_50;
-
-// This observer will be triggered whenever a button is pressed
-// In a real project, each button would also have its own unique behavior,
-// to capture the actual intent of the user
-fn universal_button_click_behavior(
-    mut click: On<Pointer<Click>>,
-    mut button_query: Query<(&mut BackgroundColor, &mut ResetTimer)>,
-) {
-    let button_entity = click.entity;
-    if let Ok((mut color, mut reset_timer)) = button_query.get_mut(button_entity) {
-        // This would be a great place to play a little sound effect too!
-        color.0 = PRESSED_BUTTON.into();
-        reset_timer.0 = Timer::from_seconds(0.3, TimerMode::Once);
-
-        // Picking events propagate up the hierarchy,
-        // so we need to stop the propagation here now that we've handled it
-        click.propagate(false);
-    }
-}
-
-/// Resets a UI element to its default state when the timer has elapsed.
-#[derive(Component, Default, Deref, DerefMut)]
-struct ResetTimer(Timer);
-
-fn reset_button_after_interaction(
-    time: Res<Time>,
-    mut query: Query<(&mut ResetTimer, &mut BackgroundColor)>,
-) {
-    for (mut reset_timer, mut color) in query.iter_mut() {
-        reset_timer.tick(time.delta());
-        if reset_timer.just_finished() {
-            color.0 = NORMAL_BUTTON.into();
-        }
-    }
-}
-
-// We're spawning a simple grid of buttons and some instructions
-// The buttons are just colored rectangles with text displaying the button's name
-fn setup_ui(
-    mut commands: Commands,
-    mut directional_nav_map: ResMut<DirectionalNavigationMap>,
-    mut input_focus: ResMut<InputFocus>,
-) {
-    const N_ROWS: u16 = 5;
-    const N_COLS: u16 = 3;
-
-    // Rendering UI elements requires a camera
-    commands.spawn(Camera2d);
-
-    // Create a full-screen background node
-    let root_node = commands
-        .spawn(Node {
-            width: percent(100),
-            height: percent(100),
-            ..default()
-        })
-        .id();
-
-    // Add instruction to the left of the grid
-    let instructions = commands
-        .spawn((
-            Text::new("Use arrow keys or D-pad to navigate. \
-            Click the buttons, or press Enter / the South gamepad button to interact with the focused button."),
-            Node {
-                width: px(300),
-                justify_content: JustifyContent::Center,
-                align_items: AlignItems::Center,
-                margin: UiRect::all(px(12)),
-                ..default()
-            },
-        ))
-        .id();
-
-    // Set up the root entity to hold the grid
-    let grid_root_entity = commands
-        .spawn(Node {
-            display: Display::Grid,
-            // Allow the grid to take up the full height and the rest of the width of the window
-            width: percent(100),
-            height: percent(100),
-            // Set the number of rows and columns in the grid
-            // allowing the grid to automatically size the cells
-            grid_template_columns: RepeatedGridTrack::auto(N_COLS),
-            grid_template_rows: RepeatedGridTrack::auto(N_ROWS),
-            ..default()
-        })
-        .id();
-
-    // Add the instructions and grid to the root node
-    commands
-        .entity(root_node)
-        .add_children(&[instructions, grid_root_entity]);
-
-    let mut button_entities: HashMap<(u16, u16), Entity> = HashMap::default();
-    for row in 0..N_ROWS {
-        for col in 0..N_COLS {
-            let button_name = format!("Button {row}-{col}");
-
-            let button_entity = commands
-                .spawn((
-                    Button,
-                    Node {
-                        width: px(200),
-                        height: px(120),
-                        // Add a border so we can show which element is focused
-                        border: UiRect::all(px(4)),
-                        // Center the button's text label
-                        justify_content: JustifyContent::Center,
-                        align_items: AlignItems::Center,
-                        // Center the button within the grid cell
-                        align_self: AlignSelf::Center,
-                        justify_self: JustifySelf::Center,
-                        border_radius: BorderRadius::all(px(16)),
-                        ..default()
-                    },
-                    ResetTimer::default(),
-                    BackgroundColor::from(NORMAL_BUTTON),
-                    Name::new(button_name.clone()),
-                ))
-                // Add a text element to the button
-                .with_child((
-                    Text::new(button_name),
-                    // And center the text if it flows onto multiple lines
-                    TextLayout {
-                        justify: Justify::Center,
-                        ..default()
-                    },
-                ))
-                .id();
-
-            // Add the button to the grid
-            commands.entity(grid_root_entity).add_child(button_entity);
-
-            // Keep track of the button entities so we can set up our navigation graph
-            button_entities.insert((row, col), button_entity);
-        }
-    }
-
-    // Connect all of the buttons in the same row to each other,
-    // looping around when the edge is reached.
-    for row in 0..N_ROWS {
-        let entities_in_row: Vec<Entity> = (0..N_COLS)
-            .map(|col| button_entities.get(&(row, col)).unwrap())
-            .copied()
-            .collect();
-        directional_nav_map.add_looping_edges(&entities_in_row, CompassOctant::East);
-    }
-
-    // Connect all of the buttons in the same column to each other,
-    // but don't loop around when the edge is reached.
-    // While looping is a very reasonable choice, we're not doing it here to demonstrate the different options.
-    for col in 0..N_COLS {
-        let entities_in_column: Vec<Entity> = (0..N_ROWS)
-            .map(|row| button_entities.get(&(row, col)).unwrap())
-            .copied()
-            .collect();
-
-        directional_nav_map.add_edges(&entities_in_column, CompassOctant::South);
-    }
-
-    // When changing scenes, remember to set an initial focus!
-    let top_left_entity = *button_entities.get(&(0, 0)).unwrap();
-    input_focus.set(top_left_entity);
-}
-
-// The indirection between inputs and actions allows us to easily remap inputs
-// and handle multiple input sources (keyboard, gamepad, etc.) in our game
-#[derive(Debug, PartialEq, Eq, Hash)]
-enum DirectionalNavigationAction {
-    Up,
-    Down,
-    Left,
-    Right,
-    Select,
-}
-
-impl DirectionalNavigationAction {
-    fn variants() -> Vec<Self> {
-        vec![
-            DirectionalNavigationAction::Up,
-            DirectionalNavigationAction::Down,
-            DirectionalNavigationAction::Left,
-            DirectionalNavigationAction::Right,
-            DirectionalNavigationAction::Select,
-        ]
-    }
-
-    fn keycode(&self) -> KeyCode {
-        match self {
-            DirectionalNavigationAction::Up => KeyCode::ArrowUp,
-            DirectionalNavigationAction::Down => KeyCode::ArrowDown,
-            DirectionalNavigationAction::Left => KeyCode::ArrowLeft,
-            DirectionalNavigationAction::Right => KeyCode::ArrowRight,
-            DirectionalNavigationAction::Select => KeyCode::Enter,
-        }
-    }
-
-    fn gamepad_button(&self) -> GamepadButton {
-        match self {
-            DirectionalNavigationAction::Up => GamepadButton::DPadUp,
-            DirectionalNavigationAction::Down => GamepadButton::DPadDown,
-            DirectionalNavigationAction::Left => GamepadButton::DPadLeft,
-            DirectionalNavigationAction::Right => GamepadButton::DPadRight,
-            // This is the "A" button on an Xbox controller,
-            // and is conventionally used as the "Select" / "Interact" button in many games
-            DirectionalNavigationAction::Select => GamepadButton::South,
-        }
-    }
-}
-
-// This keeps track of the inputs that are currently being pressed
-#[derive(Default, Resource)]
-struct ActionState {
-    pressed_actions: HashSet<DirectionalNavigationAction>,
-}
-
-fn process_inputs(
-    mut action_state: ResMut<ActionState>,
-    keyboard_input: Res<ButtonInput<KeyCode>>,
-    gamepad_input: Query<&Gamepad>,
-) {
-    // Reset the set of pressed actions each frame
-    // to ensure that we only process each action once
-    action_state.pressed_actions.clear();
-
-    for action in DirectionalNavigationAction::variants() {
-        // Use just_pressed to ensure that we only process each action once
-        // for each time it is pressed
-        if keyboard_input.just_pressed(action.keycode()) {
-            action_state.pressed_actions.insert(action);
-        }
-    }
-
-    // We're treating this like a single-player game:
-    // if multiple gamepads are connected, we don't care which one is being used
-    for gamepad in gamepad_input.iter() {
-        for action in DirectionalNavigationAction::variants() {
-            // Unlike keyboard input, gamepads are bound to a specific controller
-            if gamepad.just_pressed(action.gamepad_button()) {
-                action_state.pressed_actions.insert(action);
-            }
-        }
-    }
-}
-
-fn navigate(action_state: Res<ActionState>, mut directional_navigation: DirectionalNavigation) {
-    // If the user is pressing both left and right, or up and down,
-    // we should not move in either direction.
-    let net_east_west = action_state
-        .pressed_actions
-        .contains(&DirectionalNavigationAction::Right) as i8
-        - action_state
-            .pressed_actions
-            .contains(&DirectionalNavigationAction::Left) as i8;
-
-    let net_north_south = action_state
-        .pressed_actions
-        .contains(&DirectionalNavigationAction::Up) as i8
-        - action_state
-            .pressed_actions
-            .contains(&DirectionalNavigationAction::Down) as i8;
-
-    // Compute the direction that the user is trying to navigate in
-    let maybe_direction = match (net_east_west, net_north_south) {
-        (0, 0) => None,
-        (0, 1) => Some(CompassOctant::North),
-        (1, 1) => Some(CompassOctant::NorthEast),
-        (1, 0) => Some(CompassOctant::East),
-        (1, -1) => Some(CompassOctant::SouthEast),
-        (0, -1) => Some(CompassOctant::South),
-        (-1, -1) => Some(CompassOctant::SouthWest),
-        (-1, 0) => Some(CompassOctant::West),
-        (-1, 1) => Some(CompassOctant::NorthWest),
-        _ => None,
-    };
-
-    if let Some(direction) = maybe_direction {
-        match directional_navigation.navigate(direction) {
-            // In a real game, you would likely want to play a sound or show a visual effect
-            // on both successful and unsuccessful navigation attempts
-            Ok(entity) => {
-                println!("Navigated {direction:?} successfully. {entity} is now focused.");
-            }
-            Err(e) => println!("Navigation failed: {e}"),
-        }
-    }
-}
-
-fn highlight_focused_element(
-    input_focus: Res<InputFocus>,
-    // While this isn't strictly needed for the example,
-    // we're demonstrating how to be a good citizen by respecting the `InputFocusVisible` resource.
-    input_focus_visible: Res<InputFocusVisible>,
-    mut query: Query<(Entity, &mut BorderColor)>,
-) {
-    for (entity, mut border_color) in query.iter_mut() {
-        if input_focus.0 == Some(entity) && input_focus_visible.0 {
-            // Don't change the border size / radius here,
-            // as it would result in wiggling buttons when they are focused
-            *border_color = BorderColor::all(FOCUSED_BORDER);
-        } else {
-            *border_color = BorderColor::DEFAULT;
-        }
-    }
-}
-
-// By sending a Pointer<Click> trigger rather than directly handling button-like interactions,
-// we can unify our handling of pointer and keyboard/gamepad interactions
-fn interact_with_focused_button(
-    action_state: Res<ActionState>,
-    input_focus: Res<InputFocus>,
-    mut commands: Commands,
-) {
-    if action_state
-        .pressed_actions
-        .contains(&DirectionalNavigationAction::Select)
-        && let Some(focused_entity) = input_focus.0
-    {
-        commands.trigger(Pointer::<Click> {
-            entity: focused_entity,
-            // We're pretending that we're a mouse
-            pointer_id: PointerId::Mouse,
-            // This field isn't used, so we're just setting it to a placeholder value
-            pointer_location: Location {
-                target: NormalizedRenderTarget::None {
-                    width: 0,
-                    height: 0,
-                },
-                position: Vec2::ZERO,
-            },
-            event: Click {
-                button: PointerButton::Primary,
-                // This field isn't used, so we're just setting it to a placeholder value
-                hit: HitData {
-                    camera: Entity::PLACEHOLDER,
-                    depth: 0.0,
-                    position: None,
-                    normal: None,
-                },
-                duration: Duration::from_secs_f32(0.1),
-            },
-        });
-    }
-}
diff --git a/examples/ui/auto_directional_navigation.rs b/examples/ui/navigation/directional_navigation.rs
similarity index 95%
rename from examples/ui/auto_directional_navigation.rs
rename to examples/ui/navigation/directional_navigation.rs
index 4bd63946f6f44..492ddc73b2fb2 100644
--- a/examples/ui/auto_directional_navigation.rs
+++ b/examples/ui/navigation/directional_navigation.rs
@@ -1,8 +1,7 @@
-//! Demonstrates automatic directional navigation with zero configuration.
+//! Demonstrates automatic directional navigation.
 //!
-//! Unlike the manual `directional_navigation` example, this shows how to use automatic
-//! navigation by simply adding the `AutoDirectionalNavigation` component to UI elements.
-//! The navigation graph is automatically built and maintained based on screen positions.
+//! This shows how to use automatic navigation by simply adding the [`AutoDirectionalNavigation`]
+//! component to UI elements. Navigation is automatically calculated based on screen positions.
 //!
 //! This is especially useful for:
 //! - Dynamic UIs where elements may be added, removed, or repositioned
@@ -11,6 +10,9 @@
 //!
 //! The automatic system finds the nearest neighbor in each compass direction for every node,
 //! completely eliminating the need to manually specify navigation relationships.
+//!
+//! For an example that demonstrates automatic directional navigation with manual overrides,
+//! refer to the `directional_navigation_overrides` example.
 
 use core::time::Duration;
 
@@ -45,14 +47,13 @@ fn main() {
         .insert_resource(AutoNavigationConfig {
             // Require at least 10% overlap in perpendicular axis for cardinal directions
             min_alignment_factor: 0.1,
-            // Don't connect nodes more than 500 pixels apart
+            // Don't connect nodes more than 500 pixels apart between their closest edges
             max_search_distance: Some(500.0),
             // Prefer nodes that are well-aligned
             prefer_aligned: true,
         })
         .init_resource::<ActionState>()
         .add_systems(Startup, setup_scattered_ui)
-        // Navigation graph is automatically maintained by DirectionalNavigationPlugin!
         // No manual system needed - just add AutoDirectionalNavigation to entities.
         // Input is generally handled during PreUpdate
         .add_systems(PreUpdate, (process_inputs, navigate).chain())
@@ -62,7 +63,8 @@ fn main() {
                 highlight_focused_element,
                 interact_with_focused_button,
                 reset_button_after_interaction,
-                update_focus_display,
+                update_focus_display
+                    .run_if(|input_focus: Res<InputFocus>| input_focus.is_changed()),
                 update_key_display,
             ),
         )
@@ -130,7 +132,7 @@ fn setup_scattered_ui(mut commands: Commands, mut input_focus: ResMut<InputFocus
     let instructions = commands
         .spawn((
             Text::new(
-                "Automatic Navigation Demo\n\n\
+                "Directional Navigation Demo\n\n\
                  Use arrow keys or D-pad to navigate.\n\
                  Press Enter or A button to interact.\n\n\
                  Buttons are scattered irregularly,\n\
@@ -263,7 +265,7 @@ fn setup_scattered_ui(mut commands: Commands, mut input_focus: ResMut<InputFocus
     }
 }
 
-// Action state and input handling (same as the manual navigation example)
+// Action state and input handling
 #[derive(Debug, PartialEq, Eq, Hash)]
 enum DirectionalNavigationAction {
     Up,
diff --git a/examples/ui/navigation/directional_navigation_overrides.rs b/examples/ui/navigation/directional_navigation_overrides.rs
new file mode 100644
index 0000000000000..147d2f052d559
--- /dev/null
+++ b/examples/ui/navigation/directional_navigation_overrides.rs
@@ -0,0 +1,857 @@
+//! Demonstrates automatic directional navigation with manual navigation overrides.
+//!
+//! This example shows how to leverage both automatic navigation and manual overrides to create
+//! a desired user navigation experience without much boilerplate code. In this example, there are
+//! multiple pages of UI Buttons that depict different scenarios in which both automatic and manual
+//! navigation are leveraged to produce a desired navigation experience.
+//!
+//! Manual overrides can be used to define navigation in any situation where automatic
+//! navigation fails to create an edge due to lack of proximity. For example, when creating
+//! navigation that loops around to an opposite side, manual overrides should be used to define
+//! this behavior. If one input is too far away from the others and `AutoNavigationConfig`
+//! cannot be tweaked, manual overrides can connect that input to the others. Manual navigation
+//! can also be used to override any undesired automatic navigation.
+//!
+//! The [`AutoDirectionalNavigation`] component is used to create basic, intuitive navigation to UI
+//! elements within a page. Manual navigation edges are added to the [`DirectionalNavigationMap`]
+//! to create special navigation rules. The [`AutoDirectionalNavigator`] system parameter navigates
+//! using manual navigation rules/overrides first and automatic navigation second.
+
+use core::time::Duration;
+
+use bevy::{
+    camera::NormalizedRenderTarget,
+    input_focus::{
+        directional_navigation::{
+            AutoNavigationConfig, DirectionalNavigationMap, DirectionalNavigationPlugin,
+        },
+        InputDispatchPlugin, InputFocus, InputFocusVisible,
+    },
+    math::{CompassOctant, Dir2},
+    picking::{
+        backend::HitData,
+        pointer::{Location, PointerId},
+    },
+    platform::collections::HashSet,
+    prelude::*,
+    ui::auto_directional_navigation::{AutoDirectionalNavigation, AutoDirectionalNavigator},
+};
+
+fn main() {
+    App::new()
+        // Input focus is not enabled by default, so we need to add the corresponding plugins
+        // The navigation system's resources are initialized by the DirectionalNavigationPlugin.
+        .add_plugins((
+            DefaultPlugins,
+            InputDispatchPlugin,
+            DirectionalNavigationPlugin,
+        ))
+        // This resource is canonically used to track whether or not to render a focus indicator
+        // It starts as false, but we set it to true here as we would like to see the focus indicator
+        .insert_resource(InputFocusVisible(true))
+        // Configure auto-navigation behavior
+        .insert_resource(AutoNavigationConfig {
+            // Require at least 10% overlap in perpendicular axis for cardinal directions
+            min_alignment_factor: 0.1,
+            // Don't connect nodes more than 200 pixels apart between their closest edges
+            max_search_distance: Some(200.0),
+            // Prefer nodes that are well-aligned
+            prefer_aligned: true,
+        })
+        .init_resource::<ActionState>()
+        // For automatic navigation, UI entities will have the component `AutoDirectionalNavigation`
+        // and will be automatically connected by the navigation system.
+        // We will also add some new edges that the automatic navigation system
+        // cannot create by itself by inserting them into `DirectionalNavigationMap`
+        .add_systems(Startup, setup_paged_ui)
+        // Input is generally handled during PreUpdate
+        .add_systems(PreUpdate, (process_inputs, navigate).chain())
+        .add_systems(
+            Update,
+            (
+                highlight_focused_element,
+                interact_with_focused_button,
+                reset_button_after_interaction,
+                update_focus_display
+                    .run_if(|input_focus: Res<InputFocus>| input_focus.is_changed()),
+                update_key_display,
+            ),
+        )
+        .add_observer(universal_button_click_behavior)
+        .run();
+}
+
+const PAGE_1_NORMAL_BUTTON: Srgba = bevy::color::palettes::tailwind::BLUE_400;
+const PAGE_1_PRESSED_BUTTON: Srgba = bevy::color::palettes::tailwind::BLUE_500;
+const PAGE_1_FOCUSED_BORDER: Srgba = bevy::color::palettes::tailwind::BLUE_50;
+
+const PAGE_2_NORMAL_BUTTON: Srgba = bevy::color::palettes::tailwind::RED_400;
+const PAGE_2_PRESSED_BUTTON: Srgba = bevy::color::palettes::tailwind::RED_500;
+const PAGE_2_FOCUSED_BORDER: Srgba = bevy::color::palettes::tailwind::RED_50;
+
+const PAGE_3_NORMAL_BUTTON: Srgba = bevy::color::palettes::tailwind::GREEN_400;
+const PAGE_3_PRESSED_BUTTON: Srgba = bevy::color::palettes::tailwind::GREEN_500;
+const PAGE_3_FOCUSED_BORDER: Srgba = bevy::color::palettes::tailwind::GREEN_50;
+
+const NORMAL_BUTTON_COLORS: [Srgba; 3] = [
+    PAGE_1_NORMAL_BUTTON,
+    PAGE_2_NORMAL_BUTTON,
+    PAGE_3_NORMAL_BUTTON,
+];
+const PRESSED_BUTTON_COLORS: [Srgba; 3] = [
+    PAGE_1_PRESSED_BUTTON,
+    PAGE_2_PRESSED_BUTTON,
+    PAGE_3_PRESSED_BUTTON,
+];
+const FOCUSED_BORDER_COLORS: [Srgba; 3] = [
+    PAGE_1_FOCUSED_BORDER,
+    PAGE_2_FOCUSED_BORDER,
+    PAGE_3_FOCUSED_BORDER,
+];
+
+/// Marker component for the text that displays the currently focused button
+#[derive(Component)]
+struct FocusDisplay;
+
+/// Marker component for the text that displays the last key pressed
+#[derive(Component)]
+struct KeyDisplay;
+
+/// Component that stores which page a button is on
+#[derive(Component)]
+struct Page(usize);
+
+// Observer for button clicks
+fn universal_button_click_behavior(
+    mut click: On<Pointer<Click>>,
+    mut button_query: Query<(&mut BackgroundColor, &Page, &mut ResetTimer)>,
+) {
+    let button_entity = click.entity;
+    if let Ok((mut color, page, mut reset_timer)) = button_query.get_mut(button_entity) {
+        color.0 = PRESSED_BUTTON_COLORS[page.0].into();
+        reset_timer.0 = Timer::from_seconds(0.3, TimerMode::Once);
+        click.propagate(false);
+    }
+}
+
+#[derive(Component, Default, Deref, DerefMut)]
+struct ResetTimer(Timer);
+
+fn reset_button_after_interaction(
+    time: Res<Time>,
+    mut query: Query<(&mut ResetTimer, &mut BackgroundColor, &Page)>,
+) {
+    for (mut reset_timer, mut color, page) in query.iter_mut() {
+        reset_timer.tick(time.delta());
+        if reset_timer.just_finished() {
+            color.0 = NORMAL_BUTTON_COLORS[page.0].into();
+        }
+    }
+}
+
+/// Spawn pages of buttons to demonstrate automatic and manual navigation.
+///
+/// This function creates three pages of buttons. All buttons have automatic navigation
+/// enabled by having the [`AutoDirectionalNavigation`] component.
+/// Manual navigation is specified with the [`DirectionalNavigationMap`].
+/// Page 1 has a simple grid of buttons where transitions between rows is defined using
+/// the [`DirectionalNavigationMap`].
+/// Page 2 has a cluster of buttons to the top left and a lonely button on the bottom right.
+/// Navigation between the cluster and the lonely button is defined using the
+/// [`DirectionalNavigationMap`].
+/// Page 3 has the same simple grid of buttons as page 1, but automatic navigation has been
+/// overridden in the vertical direction with the [`DirectionalNavigationMap`].
+fn setup_paged_ui(
+    mut commands: Commands,
+    mut manual_directional_nav_map: ResMut<DirectionalNavigationMap>,
+    mut input_focus: ResMut<InputFocus>,
+) {
+    commands.spawn(Camera2d);
+
+    // Create a full-screen background node
+    let root_node = commands
+        .spawn(Node {
+            width: percent(100),
+            height: percent(100),
+            ..default()
+        })
+        .id();
+
+    // Instructions
+    let instructions = commands
+        .spawn((
+            Text::new(
+                "Directional Navigation Overrides Demo\n\n\
+                 Use arrow keys or D-pad to navigate.\n\
+                 Press Enter or A button to interact.\n\n\
+                 Navigation on each page is a combination of \
+                 both automatic and manual navigation.",
+            ),
+            Node {
+                position_type: PositionType::Absolute,
+                left: px(20),
+                top: px(20),
+                width: px(280),
+                padding: UiRect::all(px(12)),
+                border_radius: BorderRadius::all(px(8)),
+                ..default()
+            },
+            BackgroundColor(Color::srgba(0.1, 0.1, 0.1, 0.8)),
+        ))
+        .id();
+    commands.entity(root_node).add_children(&[instructions]);
+
+    // Focus display - shows which button is currently focused
+    commands.spawn((
+        Text::new("Focused: None"),
+        FocusDisplay,
+        Node {
+            position_type: PositionType::Absolute,
+            left: px(20),
+            bottom: px(80),
+            width: px(280),
+            padding: UiRect::all(px(12)),
+            border_radius: BorderRadius::all(px(8)),
+            ..default()
+        },
+        BackgroundColor(Color::srgba(0.1, 0.5, 0.1, 0.8)),
+        TextFont {
+            font_size: 20.0,
+            ..default()
+        },
+    ));
+
+    // Key display - shows the last key pressed
+    commands.spawn((
+        Text::new("Last Key: None"),
+        KeyDisplay,
+        Node {
+            position_type: PositionType::Absolute,
+            left: px(20),
+            bottom: px(20),
+            width: px(280),
+            padding: UiRect::all(px(12)),
+            border_radius: BorderRadius::all(px(8)),
+            ..default()
+        },
+        BackgroundColor(Color::srgba(0.5, 0.1, 0.5, 0.8)),
+        TextFont {
+            font_size: 20.0,
+            ..default()
+        },
+    ));
+
+    // Setup the pages with buttons and helper text
+    let mut pages_entities = [
+        Vec::with_capacity(12),
+        Vec::with_capacity(12),
+        Vec::with_capacity(12),
+    ];
+    let mut text_entities = Vec::with_capacity(10);
+    for (page_num, page_button_entities) in pages_entities.iter_mut().enumerate() {
+        if page_num == 1 {
+            // the second page
+            setup_buttons_for_triangle_page(
+                &mut commands,
+                page_num,
+                (page_button_entities, &mut text_entities),
+            );
+        } else {
+            // the first and third pages are regular grids
+            setup_buttons_for_grid_page(
+                &mut commands,
+                page_num,
+                (page_button_entities, &mut text_entities),
+            );
+        }
+
+        // Only the first page is visible at setup.
+        let visibility = if page_num == 0 {
+            Visibility::Visible
+        } else {
+            Visibility::Hidden
+        };
+        let page = commands
+            .spawn((
+                Node {
+                    width: percent(100),
+                    height: percent(100),
+                    ..default()
+                },
+                visibility,
+            ))
+            .id();
+
+        commands
+            .entity(page)
+            .add_children(page_button_entities)
+            .add_children(&text_entities);
+
+        text_entities.clear();
+    }
+
+    // For Pages 1 and 3, add manual edges within the grid page for navigation between rows.
+    let entity_pairs = [
+        // the end of the first row should connect to the beginning of the second
+        ((0, 2), (1, 0)),
+        // the end of the second row should connect to the beginning of the third
+        ((1, 2), (2, 0)),
+        // the end of the third row should connect to the beginning of the fourth
+        ((2, 2), (3, 0)),
+    ];
+    for (page_num, page_entities) in pages_entities.iter().enumerate() {
+        // Skip Page 2; we are only adding these manual edges for the grid pages.
+        if page_num == 1 {
+            continue;
+        }
+        for ((entity_a_row, entity_a_col), (entity_b_row, entity_b_col)) in entity_pairs.iter() {
+            manual_directional_nav_map.add_symmetrical_edge(
+                page_entities[entity_a_row * 3 + entity_a_col],
+                page_entities[entity_b_row * 3 + entity_b_col],
+                CompassOctant::East,
+            );
+        }
+    }
+
+    // Add manual edges within the triangle page (Page 2) between buttons 3 and 4.
+    // The `AutoNavigationConfig` is set to our desired values, but automatic
+    // navigation does not connect Button 3 to Button 4, so we have to add
+    // this navigation manually.
+    manual_directional_nav_map.add_symmetrical_edge(
+        pages_entities[1][2],
+        pages_entities[1][3],
+        CompassOctant::East,
+    );
+    manual_directional_nav_map.add_symmetrical_edge(
+        pages_entities[1][2],
+        pages_entities[1][3],
+        CompassOctant::South,
+    );
+    manual_directional_nav_map.add_symmetrical_edge(
+        pages_entities[1][2],
+        pages_entities[1][3],
+        CompassOctant::SouthEast,
+    );
+
+    // For Page 3, we override the navigation North and South to be inverted.
+    let mut col_entities = Vec::with_capacity(4);
+    for col in 0..=2 {
+        for row in 0..=3 {
+            col_entities.push(pages_entities[2][row * 3 + col]);
+        }
+        manual_directional_nav_map.add_looping_edges(&col_entities, CompassOctant::North);
+        col_entities.clear();
+    }
+
+    // Add manual edges between pages.
+    // When navigating east (right) from the last button of page 1,
+    // go to the first button of page 2. This edge is symmetrical.
+    manual_directional_nav_map.add_symmetrical_edge(
+        pages_entities[0][11],
+        pages_entities[1][0],
+        CompassOctant::East,
+    );
+    // When navigating south (down) from the last button of page 2,
+    // go to the first button of page 3. This edge is NOT symmetrical.
+    // This means going north (up) from the first button of page 3 does
+    // NOT go to the last button of page 2.
+    manual_directional_nav_map.add_edge(
+        pages_entities[1][3],
+        pages_entities[2][0],
+        CompassOctant::South,
+    );
+    // When navigating west (left) from the first button of page 3,
+    // go back to the last button of page 2. This edge is NOT symmetrical.
+    manual_directional_nav_map.add_edge(
+        pages_entities[2][0],
+        pages_entities[1][3],
+        CompassOctant::West,
+    );
+    // When navigating east (right) from the last button of page 1,
+    // go to the first button of page 2. This edge is symmetrical.
+    manual_directional_nav_map.add_symmetrical_edge(
+        pages_entities[2][11],
+        pages_entities[0][0],
+        CompassOctant::East,
+    );
+
+    // Set initial focus
+    input_focus.set(pages_entities[0][0]);
+}
+
+/// Creates the buttons and text for a grid page and places the ids into their
+/// respective Vecs in `entities`.
+fn setup_buttons_for_grid_page(
+    commands: &mut Commands,
+    page_num: usize,
+    entities: (&mut Vec<Entity>, &mut Vec<Entity>),
+) {
+    let (page_button_entities, text_entities) = entities;
+
+    // Spawn buttons in a grid
+    // Auto-navigation will automatically configure navigation within rows.
+    let button_positions = [
+        // Row 0
+        [(450.0, 80.0), (650.0, 80.0), (850.0, 80.0)],
+        // Row 1
+        [(450.0, 215.0), (650.0, 215.0), (850.0, 215.0)],
+        // Row 2
+        [(450.0, 350.0), (650.0, 350.0), (850.0, 350.0)],
+        // Row 3
+        [(450.0, 485.0), (650.0, 485.0), (850.0, 485.0)],
+    ];
+    for (i, row) in button_positions.iter().enumerate() {
+        for (j, (left, top)) in row.iter().enumerate() {
+            let button_entity = spawn_auto_nav_button(
+                commands,
+                format!("Btn {}-{}", i + 1, j + 1),
+                left,
+                top,
+                page_num,
+            );
+            page_button_entities.push(button_entity);
+        }
+    }
+
+    // Text describing current page
+    let current_page_entity = spawn_small_text_node(
+        commands,
+        format!("Currently on Page {}", page_num + 1),
+        650,
+        20,
+        Justify::Center,
+    );
+    text_entities.push(current_page_entity);
+
+    // Text describing direction to go to the previous page, placed left of the top-left button.
+    let previous_page = if page_num == 0 { 3 } else { page_num };
+    let previous_page_entity = spawn_small_text_node(
+        commands,
+        format!("Page {} << ", previous_page),
+        310,
+        120,
+        Justify::Right,
+    );
+    text_entities.push(previous_page_entity);
+
+    // Text describing direction to go to the next page, placed right of the bottom-right button.
+    let next_page_entity = spawn_small_text_node(
+        commands,
+        format!(">> Page {}", (page_num + 1) % 3 + 1),
+        1000,
+        525,
+        Justify::Left,
+    );
+    text_entities.push(next_page_entity);
+
+    // Texts describing that moving right wraps to the next row.
+    let right_1 = spawn_small_text_node(commands, "> Btn 2-1".into(), 1000, 120, Justify::Left);
+    let right_2 = spawn_small_text_node(commands, "> Btn 3-1".into(), 1000, 255, Justify::Left);
+    let right_3 = spawn_small_text_node(commands, "> Btn 4-1".into(), 1000, 390, Justify::Left);
+    let left_1 = spawn_small_text_node(commands, "Btn 1-3 < ".into(), 310, 255, Justify::Right);
+    let left_2 = spawn_small_text_node(commands, "Btn 2-3 < ".into(), 310, 390, Justify::Right);
+    let left_3 = spawn_small_text_node(commands, "Btn 3-3 < ".into(), 310, 525, Justify::Right);
+    text_entities.push(right_1);
+    text_entities.push(right_2);
+    text_entities.push(right_3);
+    text_entities.push(left_1);
+    text_entities.push(left_2);
+    text_entities.push(left_3);
+
+    // For the third page, add a notice about vertical navigation being inverted in the grid.
+    if page_num == 2 {
+        let footer_info = commands
+            .spawn((
+                Text::new(
+                    "Vertical Navigation has been manually overridden to be inverted! \
+                ^ moves down, and v (down) moves up.",
+                ),
+                Node {
+                    position_type: PositionType::Absolute,
+                    left: px(450),
+                    top: px(600),
+                    width: px(540),
+                    padding: UiRect::all(px(12)),
+                    ..default()
+                },
+                TextFont {
+                    font_size: 20.0,
+                    ..default()
+                },
+            ))
+            .id();
+        text_entities.push(footer_info);
+    }
+}
+
+/// Creates the buttons and text for the triangle page (page 2) and places the ids into their
+/// respective Vecs in `entities`.
+fn setup_buttons_for_triangle_page(
+    commands: &mut Commands,
+    page_num: usize,
+    entities: (&mut Vec<Entity>, &mut Vec<Entity>),
+) {
+    let button_positions = [
+        (450.0, 80.0),   // top left
+        (700.0, 80.0),   // top right
+        (575.0, 215.0),  // middle
+        (1050.0, 350.0), // bottom right
+    ];
+    let (page_button_entities, text_entities) = entities;
+    for (i, (left, top)) in button_positions.iter().enumerate() {
+        let button_entity =
+            spawn_auto_nav_button(commands, format!("Btn {}", i + 1), left, top, page_num);
+        page_button_entities.push(button_entity);
+    }
+
+    // Text describing current page
+    let current_page_entity = spawn_small_text_node(
+        commands,
+        format!("Currently on Page {}", page_num + 1),
+        650,
+        20,
+        Justify::Center,
+    );
+    text_entities.push(current_page_entity);
+
+    // Text describing direction to go to the previous page, placed left of the top-left button.
+    let previous_page = if page_num == 0 { 3 } else { page_num };
+    let previous_page_entity = spawn_small_text_node(
+        commands,
+        format!("Page {} << ", previous_page),
+        310,
+        120,
+        Justify::Right,
+    );
+    text_entities.push(previous_page_entity);
+
+    // Direction to navigate from button 3 to button 4, placed below center button
+    let below_button_three_entity =
+        spawn_small_text_node(commands, "v\nBtn 4".into(), 575, 325, Justify::Center);
+    text_entities.push(below_button_three_entity);
+
+    // Direction to navigate from button 3 to button 4, placed right of center button
+    let right_of_button_three_entity =
+        spawn_small_text_node(commands, "> Btn 4".into(), 735, 255, Justify::Left);
+    text_entities.push(right_of_button_three_entity);
+
+    // Direction to navigate from button 4 to button 3, placed above bottom right button
+    let below_button_three_entity =
+        spawn_small_text_node(commands, "Btn 3\n^".into(), 1050, 300, Justify::Center);
+    text_entities.push(below_button_three_entity);
+
+    // Direction to navigate from button 4 to button 3, placed left of bottom right button
+    let right_of_button_three_entity =
+        spawn_small_text_node(commands, "Btn 3 < ".into(), 910, 390, Justify::Right);
+    text_entities.push(right_of_button_three_entity);
+
+    // Direction to go to the next page, placed bottom of the bottom-right button.
+    let next_page_entity = spawn_small_text_node(
+        commands,
+        format!("V\nV\nPage {}", (page_num + 1) % 3 + 1),
+        1050,
+        460,
+        Justify::Center,
+    );
+    text_entities.push(next_page_entity);
+}
+
+fn spawn_auto_nav_button(
+    commands: &mut Commands,
+    text: String,
+    left: &f64,
+    top: &f64,
+    page_num: usize,
+) -> Entity {
+    commands
+        .spawn((
+            Button,
+            Node {
+                position_type: PositionType::Absolute,
+                left: px(*left),
+                top: px(*top),
+                width: px(140),
+                height: px(100),
+                border: UiRect::all(px(4)),
+                justify_content: JustifyContent::Center,
+                align_items: AlignItems::Center,
+                border_radius: BorderRadius::all(px(12)),
+                ..default()
+            },
+            Page(page_num),
+            BackgroundColor(NORMAL_BUTTON_COLORS[page_num].into()),
+            // Just add this component for automatic navigation
+            AutoDirectionalNavigation::default(),
+            ResetTimer::default(),
+            Name::new(text.clone()),
+        ))
+        .with_child((
+            Text::new(text),
+            TextLayout {
+                justify: Justify::Center,
+                ..default()
+            },
+        ))
+        .id()
+}
+
+fn spawn_small_text_node(
+    commands: &mut Commands,
+    text: String,
+    left: i32,
+    top: i32,
+    justify: Justify,
+) -> Entity {
+    commands
+        .spawn((
+            Text::new(text),
+            Node {
+                position_type: PositionType::Absolute,
+                left: px(left),
+                top: px(top),
+                width: px(140),
+                padding: UiRect::all(px(12)),
+                ..default()
+            },
+            TextFont {
+                font_size: 20.0,
+                ..default()
+            },
+            TextLayout {
+                justify,
+                ..default()
+            },
+        ))
+        .id()
+}
+
+// Action state and input handling
+#[derive(Debug, PartialEq, Eq, Hash)]
+enum DirectionalNavigationAction {
+    Up,
+    Down,
+    Left,
+    Right,
+    Select,
+}
+
+impl DirectionalNavigationAction {
+    fn variants() -> Vec<Self> {
+        vec![
+            DirectionalNavigationAction::Up,
+            DirectionalNavigationAction::Down,
+            DirectionalNavigationAction::Left,
+            DirectionalNavigationAction::Right,
+            DirectionalNavigationAction::Select,
+        ]
+    }
+
+    fn keycode(&self) -> KeyCode {
+        match self {
+            DirectionalNavigationAction::Up => KeyCode::ArrowUp,
+            DirectionalNavigationAction::Down => KeyCode::ArrowDown,
+            DirectionalNavigationAction::Left => KeyCode::ArrowLeft,
+            DirectionalNavigationAction::Right => KeyCode::ArrowRight,
+            DirectionalNavigationAction::Select => KeyCode::Enter,
+        }
+    }
+
+    fn gamepad_button(&self) -> GamepadButton {
+        match self {
+            DirectionalNavigationAction::Up => GamepadButton::DPadUp,
+            DirectionalNavigationAction::Down => GamepadButton::DPadDown,
+            DirectionalNavigationAction::Left => GamepadButton::DPadLeft,
+            DirectionalNavigationAction::Right => GamepadButton::DPadRight,
+            DirectionalNavigationAction::Select => GamepadButton::South,
+        }
+    }
+}
+
+#[derive(Default, Resource)]
+struct ActionState {
+    pressed_actions: HashSet<DirectionalNavigationAction>,
+}
+
+fn process_inputs(
+    mut action_state: ResMut<ActionState>,
+    keyboard_input: Res<ButtonInput<KeyCode>>,
+    gamepad_input: Query<&Gamepad>,
+) {
+    action_state.pressed_actions.clear();
+
+    for action in DirectionalNavigationAction::variants() {
+        if keyboard_input.just_pressed(action.keycode()) {
+            action_state.pressed_actions.insert(action);
+        }
+    }
+
+    for gamepad in gamepad_input.iter() {
+        for action in DirectionalNavigationAction::variants() {
+            if gamepad.just_pressed(action.gamepad_button()) {
+                action_state.pressed_actions.insert(action);
+            }
+        }
+    }
+}
+
+fn navigate(
+    action_state: Res<ActionState>,
+    parent_query: Query<&ChildOf>,
+    mut visibility_query: Query<&mut Visibility>,
+    mut auto_directional_navigator: AutoDirectionalNavigator,
+) {
+    let net_east_west = action_state
+        .pressed_actions
+        .contains(&DirectionalNavigationAction::Right) as i8
+        - action_state
+            .pressed_actions
+            .contains(&DirectionalNavigationAction::Left) as i8;
+
+    let net_north_south = action_state
+        .pressed_actions
+        .contains(&DirectionalNavigationAction::Up) as i8
+        - action_state
+            .pressed_actions
+            .contains(&DirectionalNavigationAction::Down) as i8;
+
+    // Use Dir2::from_xy to convert input to direction, then convert to CompassOctant
+    let maybe_direction = Dir2::from_xy(net_east_west as f32, net_north_south as f32)
+        .ok()
+        .map(CompassOctant::from);
+
+    // Store the previous focus in case navigation switches pages.
+    let previous_focus = auto_directional_navigator.input_focus();
+    if let Some(direction) = maybe_direction {
+        match auto_directional_navigator.navigate(direction) {
+            Ok(new_focus) => {
+                // Successfully navigated!
+
+                // If navigation switches between pages, change the visibilities of pages
+                if let Ok(current_child_of) = parent_query.get(new_focus)
+                    && let Ok(mut current_page_visibility) =
+                        visibility_query.get_mut(current_child_of.parent())
+                {
+                    *current_page_visibility = Visibility::Visible;
+
+                    if let Some(previous_focus_entity) = previous_focus
+                        && let Ok(previous_child_of) = parent_query.get(previous_focus_entity)
+                        && previous_child_of.parent() != current_child_of.parent()
+                        && let Ok(mut previous_page_visibility) =
+                            visibility_query.get_mut(previous_child_of.parent())
+                    {
+                        *previous_page_visibility = Visibility::Hidden;
+                    }
+                }
+            }
+            Err(_e) => {
+                // Navigation failed (no neighbor in that direction)
+            }
+        }
+    }
+}
+
+fn update_focus_display(
+    input_focus: Res<InputFocus>,
+    button_query: Query<&Name, With<Button>>,
+    mut display_query: Query<&mut Text, With<FocusDisplay>>,
+) {
+    if let Ok(mut text) = display_query.single_mut() {
+        if let Some(focused_entity) = input_focus.0 {
+            if let Ok(name) = button_query.get(focused_entity) {
+                **text = format!("Focused: {}", name);
+            } else {
+                **text = "Focused: Unknown".to_string();
+            }
+        } else {
+            **text = "Focused: None".to_string();
+        }
+    }
+}
+
+fn update_key_display(
+    keyboard_input: Res<ButtonInput<KeyCode>>,
+    gamepad_input: Query<&Gamepad>,
+    mut display_query: Query<&mut Text, With<KeyDisplay>>,
+) {
+    if let Ok(mut text) = display_query.single_mut() {
+        // Check for keyboard inputs
+        for action in DirectionalNavigationAction::variants() {
+            if keyboard_input.just_pressed(action.keycode()) {
+                let key_name = match action {
+                    DirectionalNavigationAction::Up => "Up Arrow",
+                    DirectionalNavigationAction::Down => "Down Arrow",
+                    DirectionalNavigationAction::Left => "Left Arrow",
+                    DirectionalNavigationAction::Right => "Right Arrow",
+                    DirectionalNavigationAction::Select => "Enter",
+                };
+                **text = format!("Last Key: {}", key_name);
+                return;
+            }
+        }
+
+        // Check for gamepad inputs
+        for gamepad in gamepad_input.iter() {
+            for action in DirectionalNavigationAction::variants() {
+                if gamepad.just_pressed(action.gamepad_button()) {
+                    let button_name = match action {
+                        DirectionalNavigationAction::Up => "D-Pad Up",
+                        DirectionalNavigationAction::Down => "D-Pad Down",
+                        DirectionalNavigationAction::Left => "D-Pad Left",
+                        DirectionalNavigationAction::Right => "D-Pad Right",
+                        DirectionalNavigationAction::Select => "A Button",
+                    };
+                    **text = format!("Last Key: {}", button_name);
+                    return;
+                }
+            }
+        }
+    }
+}
+
+fn highlight_focused_element(
+    input_focus: Res<InputFocus>,
+    input_focus_visible: Res<InputFocusVisible>,
+    mut query: Query<(Entity, &mut BorderColor, &Page)>,
+) {
+    for (entity, mut border_color, page) in query.iter_mut() {
+        if input_focus.0 == Some(entity) && input_focus_visible.0 {
+            *border_color = BorderColor::all(FOCUSED_BORDER_COLORS[page.0]);
+        } else {
+            *border_color = BorderColor::DEFAULT;
+        }
+    }
+}
+
+fn interact_with_focused_button(
+    action_state: Res<ActionState>,
+    input_focus: Res<InputFocus>,
+    mut commands: Commands,
+) {
+    if action_state
+        .pressed_actions
+        .contains(&DirectionalNavigationAction::Select)
+        && let Some(focused_entity) = input_focus.0
+    {
+        commands.trigger(Pointer::<Click> {
+            entity: focused_entity,
+            pointer_id: PointerId::Mouse,
+            pointer_location: Location {
+                target: NormalizedRenderTarget::None {
+                    width: 0,
+                    height: 0,
+                },
+                position: Vec2::ZERO,
+            },
+            event: Click {
+                button: PointerButton::Primary,
+                hit: HitData {
+                    camera: Entity::PLACEHOLDER,
+                    depth: 0.0,
+                    position: None,
+                    normal: None,
+                },
+                duration: Duration::from_secs_f32(0.1),
+            },
+        });
+    }
+}