From c178afdf6ba6deedccb356773fae242422609b9b Mon Sep 17 00:00:00 2001
From: Wojciech Figat <wojtek@figat.pl>
Date: Tue, 21 Dec 2021 18:12:54 +0100
Subject: [PATCH] Add **UI navigation** system

#574
---
 Source/Engine/UI/GUI/CanvasRootControl.cs     |  75 +++++++++
 Source/Engine/UI/GUI/Common/Button.cs         |  16 +-
 Source/Engine/UI/GUI/Common/CheckBox.cs       | 112 ++++++++++---
 Source/Engine/UI/GUI/Common/Dropdown.cs       |  95 +++++++++--
 Source/Engine/UI/GUI/Common/Image.cs          |   2 +-
 Source/Engine/UI/GUI/Common/Label.cs          |   2 +-
 .../Engine/UI/GUI/Common/RichTextBoxBase.cs   |   2 +-
 Source/Engine/UI/GUI/Common/TextBox.cs        |   2 +-
 Source/Engine/UI/GUI/Common/TextBoxBase.cs    |  28 +++-
 Source/Engine/UI/GUI/ContainerControl.cs      | 153 +++++++++++++++++-
 Source/Engine/UI/GUI/Control.cs               | 127 ++++++++++++++-
 Source/Engine/UI/GUI/Enums.cs                 |  36 +++++
 Source/Engine/UI/GUI/Panels/AlphaPanel.cs     |   8 +
 Source/Engine/UI/GUI/Panels/BlurPanel.cs      |   1 +
 Source/Engine/UI/GUI/Panels/DropPanel.cs      |   9 ++
 Source/Engine/UI/GUI/Panels/GridPanel.cs      |   1 +
 .../Engine/UI/GUI/Panels/UniformGridPanel.cs  |   1 +
 Source/Engine/UI/GUI/RootControl.cs           |  56 +++++++
 Source/Engine/UI/UICanvas.cs                  |  97 +++++++++++
 Source/Engine/UI/UIControl.cpp                |  29 ++++
 Source/Engine/UI/UIControl.cs                 | 105 ++++++++++++
 Source/Engine/UI/UIControl.h                  |  15 +-
 22 files changed, 918 insertions(+), 54 deletions(-)

diff --git a/Source/Engine/UI/GUI/CanvasRootControl.cs b/Source/Engine/UI/GUI/CanvasRootControl.cs
index b40a9a3bf..dc32a8e62 100644
--- a/Source/Engine/UI/GUI/CanvasRootControl.cs
+++ b/Source/Engine/UI/GUI/CanvasRootControl.cs
@@ -1,5 +1,7 @@
 // Copyright (c) 2012-2021 Wojciech Figat. All rights reserved.
 
+using System;
+
 namespace FlaxEngine.GUI
 {
     /// <summary>
@@ -11,6 +13,8 @@ namespace FlaxEngine.GUI
     {
         private UICanvas _canvas;
         private Vector2 _mousePosition;
+        private float _navigationHeldTimeUp, _navigationHeldTimeDown, _navigationHeldTimeLeft, _navigationHeldTimeRight, _navigationHeldTimeSubmit;
+        private float _navigationRateTimeUp, _navigationRateTimeDown, _navigationRateTimeLeft, _navigationRateTimeRight, _navigationRateTimeSubmit;
 
         /// <summary>
         /// Gets the owning canvas.
@@ -137,6 +141,77 @@ namespace FlaxEngine.GUI
                    && (_canvas.TestCanvasIntersection == null || _canvas.TestCanvasIntersection(ref location));
         }
 
+        /// <inheritdoc />
+        public override void Update(float deltaTime)
+        {
+            // UI navigation
+            if (_canvas.ReceivesEvents)
+            {
+                UpdateNavigation(deltaTime, _canvas.NavigationInputActionUp, NavDirection.Up, ref _navigationHeldTimeUp, ref _navigationRateTimeUp);
+                UpdateNavigation(deltaTime, _canvas.NavigationInputActionDown, NavDirection.Down, ref _navigationHeldTimeDown, ref _navigationRateTimeDown);
+                UpdateNavigation(deltaTime, _canvas.NavigationInputActionLeft, NavDirection.Left, ref _navigationHeldTimeLeft, ref _navigationRateTimeLeft);
+                UpdateNavigation(deltaTime, _canvas.NavigationInputActionRight, NavDirection.Right, ref _navigationHeldTimeRight, ref _navigationRateTimeRight);
+                UpdateNavigation(deltaTime, _canvas.NavigationInputActionSubmit, ref _navigationHeldTimeSubmit, ref _navigationRateTimeSubmit, SubmitFocused);
+            }
+            else
+            {
+                _navigationHeldTimeUp = _navigationHeldTimeDown = _navigationHeldTimeLeft = _navigationHeldTimeRight = 0;
+                _navigationRateTimeUp = _navigationRateTimeDown = _navigationRateTimeLeft = _navigationRateTimeRight = 0;
+            }
+
+            base.Update(deltaTime);
+        }
+
+        private void UpdateNavigation(float deltaTime, string actionName, NavDirection direction, ref float heldTime, ref float rateTime)
+        {
+            if (Input.GetAction(actionName))
+            {
+                if (heldTime <= Mathf.Epsilon)
+                {
+                    Navigate(direction);
+                }
+                if (heldTime > _canvas.NavigationInputRepeatDelay)
+                {
+                    rateTime += deltaTime;
+                }
+                if (rateTime > _canvas.NavigationInputRepeatRate)
+                {
+                    Navigate(direction);
+                    rateTime = 0;
+                }
+                heldTime += deltaTime;
+            }
+            else
+            {
+                heldTime = rateTime = 0;
+            }
+        }
+
+        private void UpdateNavigation(float deltaTime, string actionName, ref float heldTime, ref float rateTime, Action action)
+        {
+            if (Input.GetAction(actionName))
+            {
+                if (heldTime <= Mathf.Epsilon)
+                {
+                    action();
+                }
+                if (heldTime > _canvas.NavigationInputRepeatDelay)
+                {
+                    rateTime += deltaTime;
+                }
+                if (rateTime > _canvas.NavigationInputRepeatRate)
+                {
+                    action();
+                    rateTime = 0;
+                }
+                heldTime += deltaTime;
+            }
+            else
+            {
+                heldTime = rateTime = 0;
+            }
+        }
+
         /// <inheritdoc />
         public override bool OnCharInput(char c)
         {
diff --git a/Source/Engine/UI/GUI/Common/Button.cs b/Source/Engine/UI/GUI/Common/Button.cs
index d08d03dec..80e53abba 100644
--- a/Source/Engine/UI/GUI/Common/Button.cs
+++ b/Source/Engine/UI/GUI/Common/Button.cs
@@ -155,7 +155,7 @@ namespace FlaxEngine.GUI
         }
 
         /// <summary>
-        /// Called when mouse clicks the button.
+        /// Called when mouse or touch clicks the button.
         /// </summary>
         protected virtual void OnClick()
         {
@@ -164,7 +164,7 @@ namespace FlaxEngine.GUI
         }
 
         /// <summary>
-        /// Called when buttons starts to be pressed by the used (via mouse or touch).
+        /// Called when button starts to be pressed by the used (via mouse or touch).
         /// </summary>
         protected virtual void OnPressBegin()
         {
@@ -174,7 +174,7 @@ namespace FlaxEngine.GUI
         }
 
         /// <summary>
-        /// Called when buttons ends to be pressed by the used (via mouse or touch).
+        /// Called when button ends to be pressed by the used (via mouse or touch).
         /// </summary>
         protected virtual void OnPressEnd()
         {
@@ -215,7 +215,7 @@ namespace FlaxEngine.GUI
                 backgroundColor = BackgroundColorSelected;
                 borderColor = BorderColorSelected;
             }
-            else if (IsMouseOver)
+            else if (IsMouseOver || IsNavFocused)
             {
                 backgroundColor = BackgroundColorHighlighted;
                 borderColor = BorderColorHighlighted;
@@ -322,5 +322,13 @@ namespace FlaxEngine.GUI
 
             base.OnLostFocus();
         }
+
+        /// <inheritdoc />
+        public override void OnSubmit()
+        {
+            OnClick();
+
+            base.OnSubmit();
+        }
     }
 }
diff --git a/Source/Engine/UI/GUI/Common/CheckBox.cs b/Source/Engine/UI/GUI/Common/CheckBox.cs
index e7ddb9a9a..609cde0ce 100644
--- a/Source/Engine/UI/GUI/Common/CheckBox.cs
+++ b/Source/Engine/UI/GUI/Common/CheckBox.cs
@@ -32,9 +32,9 @@ namespace FlaxEngine.GUI
     public class CheckBox : Control
     {
         /// <summary>
-        /// The mouse is down.
+        /// True if checked is being pressed (by mouse or touch).
         /// </summary>
-        protected bool _mouseDown;
+        protected bool _isPressed;
 
         /// <summary>
         /// The current state.
@@ -186,6 +186,32 @@ namespace FlaxEngine.GUI
             _box = new Rectangle(0, (Height - _boxSize) * 0.5f, _boxSize, _boxSize);
         }
 
+        /// <summary>
+        /// Called when mouse or touch clicks the checkbox.
+        /// </summary>
+        protected virtual void OnClick()
+        {
+            Toggle();
+        }
+
+        /// <summary>
+        /// Called when checkbox starts to be pressed by the used (via mouse or touch).
+        /// </summary>
+        protected virtual void OnPressBegin()
+        {
+            _isPressed = true;
+            if (AutoFocus)
+                Focus();
+        }
+
+        /// <summary>
+        /// Called when checkbox ends to be pressed by the used (via mouse or touch).
+        /// </summary>
+        protected virtual void OnPressEnd()
+        {
+            _isPressed = false;
+        }
+
         /// <inheritdoc />
         public override void Draw()
         {
@@ -197,7 +223,7 @@ namespace FlaxEngine.GUI
             Color borderColor = BorderColor;
             if (!enabled)
                 borderColor *= 0.5f;
-            else if (_mouseDown || _mouseOverBox)
+            else if (_isPressed || _mouseOverBox || IsNavFocused)
                 borderColor = BorderColorHighlighted;
             Render2D.DrawRectangle(_box.MakeExpanded(-2.0f), borderColor);
 
@@ -226,11 +252,9 @@ namespace FlaxEngine.GUI
         /// <inheritdoc />
         public override bool OnMouseDown(Vector2 location, MouseButton button)
         {
-            if (button == MouseButton.Left)
+            if (button == MouseButton.Left && !_isPressed)
             {
-                // Set flag
-                _mouseDown = true;
-                Focus();
+                OnPressBegin();
                 return true;
             }
 
@@ -240,16 +264,12 @@ namespace FlaxEngine.GUI
         /// <inheritdoc />
         public override bool OnMouseUp(Vector2 location, MouseButton button)
         {
-            if (button == MouseButton.Left && _mouseDown)
+            if (button == MouseButton.Left && _isPressed)
             {
-                // Clear flag
-                _mouseDown = false;
-
-                // Check if mouse is still over the box
-                if (_mouseOverBox)
+                OnPressEnd();
+                if (_box.Contains(ref location))
                 {
-                    Toggle();
-                    Focus();
+                    OnClick();
                     return true;
                 }
             }
@@ -260,11 +280,57 @@ namespace FlaxEngine.GUI
         /// <inheritdoc />
         public override void OnMouseLeave()
         {
-            base.OnMouseLeave();
-
-            // Clear flags
+            if (_isPressed)
+                OnPressEnd();
             _mouseOverBox = false;
-            _mouseDown = false;
+
+            base.OnMouseLeave();
+        }
+
+        /// <inheritdoc />
+        public override bool OnTouchDown(Vector2 location, int pointerId)
+        {
+            if (!_isPressed)
+            {
+                OnPressBegin();
+                return true;
+            }
+
+            return base.OnTouchDown(location, pointerId);
+        }
+
+        /// <inheritdoc />
+        public override bool OnTouchUp(Vector2 location, int pointerId)
+        {
+            if (_isPressed)
+            {
+                OnPressEnd();
+                if (_box.Contains(ref location))
+                {
+                    OnClick();
+                    return true;
+                }
+            }
+
+            return base.OnTouchUp(location, pointerId);
+        }
+
+        /// <inheritdoc />
+        public override void OnTouchLeave()
+        {
+            if (_isPressed)
+                OnPressEnd();
+
+            base.OnTouchLeave();
+        }
+
+        /// <inheritdoc />
+        public override void OnLostFocus()
+        {
+            if (_isPressed)
+                OnPressEnd();
+
+            base.OnLostFocus();
         }
 
         /// <inheritdoc />
@@ -274,5 +340,13 @@ namespace FlaxEngine.GUI
 
             CacheBox();
         }
+
+        /// <inheritdoc />
+        public override void OnSubmit()
+        {
+            OnClick();
+
+            base.OnSubmit();
+        }
     }
 }
diff --git a/Source/Engine/UI/GUI/Common/Dropdown.cs b/Source/Engine/UI/GUI/Common/Dropdown.cs
index 04260e32f..385971fb5 100644
--- a/Source/Engine/UI/GUI/Common/Dropdown.cs
+++ b/Source/Engine/UI/GUI/Common/Dropdown.cs
@@ -24,11 +24,57 @@ namespace FlaxEngine.GUI
             public Action LostFocus;
 
             /// <inheritdoc />
-            public override void OnLostFocus()
+            public override void OnEndContainsFocus()
             {
-                base.OnLostFocus();
+                base.OnEndContainsFocus();
 
-                LostFocus?.Invoke();
+                // Call event after this 'focus contains flag' propagation ends to prevent focus issues
+                if (LostFocus != null)
+                    Scripting.RunOnUpdate(LostFocus);
+            }
+
+            private static DropdownLabel FindItem(Control control)
+            {
+                if (control is DropdownLabel item)
+                    return item;
+                if (control is ContainerControl containerControl)
+                {
+                    foreach (var child in containerControl.Children)
+                    {
+                        item = FindItem(child);
+                        if (item != null)
+                            return item;
+                    }
+                }
+                return null;
+            }
+
+            /// <inheritdoc />
+            public override Control OnNavigate(NavDirection direction, Vector2 location, Control caller, List<Control> visited)
+            {
+                if (IsFocused)
+                {
+                    // Dropdown root is focused
+                    if (direction == NavDirection.Down)
+                    {
+                        // Pick the first item
+                        return FindItem(this);
+                    }
+
+                    // Close popup
+                    Defocus();
+                    return null;
+                }
+
+                return base.OnNavigate(direction, location, caller, visited);
+            }
+
+            /// <inheritdoc />
+            public override void OnSubmit()
+            {
+                Defocus();
+
+                base.OnSubmit();
             }
 
             /// <inheritdoc />
@@ -43,14 +89,13 @@ namespace FlaxEngine.GUI
         [HideInEditor]
         private class DropdownLabel : Label
         {
-            public int Index;
-            public Action<int> ItemClicked;
+            public Action<Label> ItemClicked;
 
             public override bool OnMouseDown(Vector2 location, MouseButton button)
             {
                 if (base.OnMouseDown(location, button))
                     return true;
-                ItemClicked?.Invoke(Index);
+                ItemClicked?.Invoke(this);
                 return true;
             }
 
@@ -58,10 +103,18 @@ namespace FlaxEngine.GUI
             {
                 if (base.OnTouchDown(location, pointerId))
                     return true;
-                ItemClicked?.Invoke(Index);
+                ItemClicked?.Invoke(this);
                 return true;
             }
 
+            /// <inheritdoc />
+            public override void OnSubmit()
+            {
+                ItemClicked?.Invoke(this);
+
+                base.OnSubmit();
+            }
+
             public override void OnDestroy()
             {
                 ItemClicked = null;
@@ -81,6 +134,7 @@ namespace FlaxEngine.GUI
         protected DropdownRoot _popup;
 
         private bool _touchDown;
+        private bool _hadNavFocus;
 
         /// <summary>
         /// The selected index of the item (-1 for no selection).
@@ -229,8 +283,6 @@ namespace FlaxEngine.GUI
         public Dropdown()
         : base(0, 0, 120, 18.0f)
         {
-            AutoFocus = false;
-
             var style = Style.Current;
             Font = new FontReference(style.FontMedium);
             TextColor = style.Foreground;
@@ -346,8 +398,9 @@ namespace FlaxEngine.GUI
 
             for (int i = 0; i < _items.Count; i++)
             {
-                var item = new Spacer
+                var item = new ContainerControl
                 {
+                    AutoFocus = false,
                     Height = itemsHeight,
                     Width = itemsWidth,
                     Parent = container,
@@ -355,6 +408,7 @@ namespace FlaxEngine.GUI
 
                 var label = new DropdownLabel
                 {
+                    AutoFocus = true,
                     X = itemsMargin,
                     Size = new Vector2(itemsWidth - itemsMargin, itemsHeight),
                     Font = Font,
@@ -363,11 +417,11 @@ namespace FlaxEngine.GUI
                     HorizontalAlignment = TextAlignment.Near,
                     Text = _items[i],
                     Parent = item,
-                    Index = i,
+                    Tag = i,
                 };
-                label.ItemClicked += index =>
+                label.ItemClicked += c =>
                 {
-                    OnItemClicked(index);
+                    OnItemClicked((int)c.Tag);
                     DestroyPopup();
                 };
                 height += itemsHeight;
@@ -416,6 +470,10 @@ namespace FlaxEngine.GUI
                 OnPopupHide();
                 _popup.Dispose();
                 _popup = null;
+                if (_hadNavFocus)
+                    NavigationFocus();
+                else
+                    Focus();
             }
         }
 
@@ -430,6 +488,7 @@ namespace FlaxEngine.GUI
 
             // Setup popup
             DestroyPopup();
+            _hadNavFocus = IsNavFocused;
             _popup = CreatePopup();
             _popup.UnlockChildrenRecursive();
             _popup.PerformLayout();
@@ -488,7 +547,7 @@ namespace FlaxEngine.GUI
                 borderColor = BorderColorSelected;
                 arrowColor = ArrowColorSelected;
             }
-            else if (IsMouseOver)
+            else if (IsMouseOver || IsNavFocused)
             {
                 backgroundColor = BackgroundColorHighlighted;
                 borderColor = BorderColorHighlighted;
@@ -590,5 +649,13 @@ namespace FlaxEngine.GUI
 
             base.OnTouchLeave(pointerId);
         }
+
+        /// <inheritdoc />
+        public override void OnSubmit()
+        {
+            ShowPopup();
+
+            base.OnSubmit();
+        }
     }
 }
diff --git a/Source/Engine/UI/GUI/Common/Image.cs b/Source/Engine/UI/GUI/Common/Image.cs
index 264fdf306..33323979b 100644
--- a/Source/Engine/UI/GUI/Common/Image.cs
+++ b/Source/Engine/UI/GUI/Common/Image.cs
@@ -114,7 +114,7 @@ namespace FlaxEngine.GUI
 
             Margin.ShrinkRectangle(ref rect);
 
-            var color = IsMouseOver ? MouseOverColor : Color;
+            var color = IsMouseOver || IsNavFocused ? MouseOverColor : Color;
             if (!Enabled)
                 color *= DisabledTint;
             Brush.Draw(rect, color);
diff --git a/Source/Engine/UI/GUI/Common/Label.cs b/Source/Engine/UI/GUI/Common/Label.cs
index e5ba9aacc..411b7dc80 100644
--- a/Source/Engine/UI/GUI/Common/Label.cs
+++ b/Source/Engine/UI/GUI/Common/Label.cs
@@ -210,7 +210,7 @@ namespace FlaxEngine.GUI
             if (ClipText)
                 Render2D.PushClip(new Rectangle(Vector2.Zero, Size));
 
-            var color = IsMouseOver ? TextColorHighlighted : TextColor;
+            var color = IsMouseOver || IsNavFocused ? TextColorHighlighted : TextColor;
 
             if (!EnabledInHierarchy)
                 color *= 0.6f;
diff --git a/Source/Engine/UI/GUI/Common/RichTextBoxBase.cs b/Source/Engine/UI/GUI/Common/RichTextBoxBase.cs
index 2cfe11fff..616f0dad8 100644
--- a/Source/Engine/UI/GUI/Common/RichTextBoxBase.cs
+++ b/Source/Engine/UI/GUI/Common/RichTextBoxBase.cs
@@ -228,7 +228,7 @@ namespace FlaxEngine.GUI
 
             // Background
             Color backColor = BackgroundColor;
-            if (IsMouseOver)
+            if (IsMouseOver || IsNavFocused)
                 backColor = BackgroundSelectedColor;
             Render2D.FillRectangle(rect, backColor);
             Render2D.DrawRectangle(rect, IsFocused ? BorderSelectedColor : BorderColor);
diff --git a/Source/Engine/UI/GUI/Common/TextBox.cs b/Source/Engine/UI/GUI/Common/TextBox.cs
index 20548eed8..ded348b5a 100644
--- a/Source/Engine/UI/GUI/Common/TextBox.cs
+++ b/Source/Engine/UI/GUI/Common/TextBox.cs
@@ -152,7 +152,7 @@ namespace FlaxEngine.GUI
 
             // Background
             Color backColor = BackgroundColor;
-            if (IsMouseOver)
+            if (IsMouseOver || IsNavFocused)
                 backColor = BackgroundSelectedColor;
             Render2D.FillRectangle(rect, backColor);
             Render2D.DrawRectangle(rect, IsFocused ? BorderSelectedColor : BorderColor);
diff --git a/Source/Engine/UI/GUI/Common/TextBoxBase.cs b/Source/Engine/UI/GUI/Common/TextBoxBase.cs
index 8196acd80..b4f8f12df 100644
--- a/Source/Engine/UI/GUI/Common/TextBoxBase.cs
+++ b/Source/Engine/UI/GUI/Common/TextBoxBase.cs
@@ -431,7 +431,6 @@ namespace FlaxEngine.GUI
             _isMultiline = isMultiline;
             _maxLength = 2147483646;
             _selectionStart = _selectionEnd = -1;
-            AutoFocus = false;
 
             var style = Style.Current;
             CaretColor = style.Foreground;
@@ -1015,6 +1014,28 @@ namespace FlaxEngine.GUI
             _isSelecting = false;
         }
 
+        /// <inheritdoc />
+        public override void NavigationFocus()
+        {
+            base.NavigationFocus();
+
+            if (IsNavFocused)
+                SelectAll();
+        }
+
+        /// <inheritdoc />
+        public override void OnSubmit()
+        {
+            OnEditEnd();
+            if (IsNavFocused)
+            {
+                OnEditBegin();
+                SelectAll();
+            }
+
+            base.OnSubmit();
+        }
+
         /// <inheritdoc />
         public override void OnMouseMove(Vector2 location)
         {
@@ -1215,7 +1236,8 @@ namespace FlaxEngine.GUI
                 SetSelection(-1);
                 _text = _onStartEditValue;
 
-                Defocus();
+                if (!IsNavFocused)
+                    Defocus();
                 OnTextChanged();
 
                 return true;
@@ -1226,7 +1248,7 @@ namespace FlaxEngine.GUI
                     // Insert new line
                     Insert('\n');
                 }
-                else
+                else if (!IsNavFocused)
                 {
                     // End editing
                     Defocus();
diff --git a/Source/Engine/UI/GUI/ContainerControl.cs b/Source/Engine/UI/GUI/ContainerControl.cs
index 3a7ba6e80..58081a8be 100644
--- a/Source/Engine/UI/GUI/ContainerControl.cs
+++ b/Source/Engine/UI/GUI/ContainerControl.cs
@@ -491,6 +491,153 @@ namespace FlaxEngine.GUI
             return child.IntersectsContent(ref location, out childSpaceLocation);
         }
 
+        #region Navigation
+
+        /// <inheritdoc />
+        public override Control OnNavigate(NavDirection direction, Vector2 location, Control caller, List<Control> visited)
+        {
+            // Try to focus itself first (only if navigation focus can enter this container)
+            if (AutoFocus && !ContainsFocus)
+                return this;
+
+            // Try to focus children
+            if (_children.Count != 0 && !visited.Contains(this))
+            {
+                visited.Add(this);
+
+                // Perform automatic navigation based on the layout
+                var result = NavigationRaycast(direction, location, visited);
+                if (result == null && direction == NavDirection.Next)
+                {
+                    // Try wrap the navigation over the layout based on the direction
+                    var visitedWrap = new List<Control>(visited);
+                    result = NavigationWrap(direction, location, visitedWrap);
+                }
+                if (result != null)
+                {
+                    result = result.OnNavigate(direction, result.PointFromParent(location), this, visited);
+                    if (result != null)
+                        return result;
+                }
+            }
+
+            // Try to focus itself
+            if (AutoFocus && !IsFocused || caller == this)
+                return this;
+
+            // Route navigation to parent
+            var parent = Parent;
+            if (AutoFocus && Visible)
+            {
+                // Focusable container controls use own nav origin instead of the provided one
+                location = GetNavOrigin(direction);
+            }
+            return parent?.OnNavigate(direction, PointToParent(location), caller, visited);
+        }
+
+        /// <summary>
+        /// Checks if this container control can more with focus navigation into the given child control.
+        /// </summary>
+        /// <param name="child">The child.</param>
+        /// <returns>True if can navigate to it, otherwise false.</returns>
+        protected virtual bool CanNavigateChild(Control child)
+        {
+            return !child.IsFocused && child.Enabled && child.Visible && CanGetAutoFocus(child);
+        }
+
+        /// <summary>
+        /// Wraps the navigation over the layout.
+        /// </summary>
+        /// <param name="direction">The navigation direction.</param>
+        /// <param name="location">The navigation start location (in the control-space).</param>
+        /// <param name="visited">The list with visited controls. Used to skip recursive navigation calls when doing traversal across the UI hierarchy.</param>
+        /// <returns>The target navigation control or null if didn't performed any navigation.</returns>
+        protected virtual Control NavigationWrap(NavDirection direction, Vector2 location, List<Control> visited)
+        {
+            // This searches form a child that calls this navigation event (see Control.OnNavigate) to determinate the layout wrapping size based on that child size
+            var currentChild = RootWindow?.FocusedControl;
+            visited.Add(this);
+            if (currentChild != null)
+            {
+                var layoutSize = currentChild.Size;
+                var predictedLocation = Vector2.Minimum;
+                switch (direction)
+                {
+                case NavDirection.Next:
+                    predictedLocation = new Vector2(0, location.Y + layoutSize.Y);
+                    break;
+                }
+                if (new Rectangle(Vector2.Zero, Size).Contains(ref predictedLocation))
+                {
+                    var result = NavigationRaycast(direction, predictedLocation, visited);
+                    if (result != null)
+                        return result;
+                }
+            }
+            return Parent?.NavigationWrap(direction, PointToParent(ref location), visited);
+        }
+
+        private static bool CanGetAutoFocus(Control c)
+        {
+            if (c.AutoFocus)
+                return true;
+            if (c is ContainerControl cc)
+            {
+                for (int i = 0; i < cc.Children.Count; i++)
+                {
+                    if (cc.CanNavigateChild(cc.Children[i]))
+                        return true;
+                }
+            }
+            return false;
+        }
+
+        private Control NavigationRaycast(NavDirection direction, Vector2 location, List<Control> visited)
+        {
+            Vector2 uiDir1 = Vector2.Zero, uiDir2 = Vector2.Zero;
+            switch (direction)
+            {
+            case NavDirection.Up:
+                uiDir1 = uiDir2 = new Vector2(0, -1);
+                break;
+            case NavDirection.Down:
+                uiDir1 = uiDir2 = new Vector2(0, 1);
+                break;
+            case NavDirection.Left:
+                uiDir1 = uiDir2 = new Vector2(-1, 0);
+                break;
+            case NavDirection.Right:
+                uiDir1 = uiDir2 = new Vector2(1, 0);
+                break;
+            case NavDirection.Next:
+                uiDir1 = new Vector2(1, 0);
+                uiDir2 = new Vector2(0, 1);
+                break;
+            }
+            Control result = null;
+            var minDistance = float.MaxValue;
+            for (var i = 0; i < _children.Count; i++)
+            {
+                var child = _children[i];
+                if (!CanNavigateChild(child) || visited.Contains(child))
+                    continue;
+                var childNavLocation = child.Center;
+                var childBounds = child.Bounds;
+                var childNavDirection = Vector2.Normalize(childNavLocation - location);
+                var childNavCoherence1 = Vector2.Dot(ref uiDir1, ref childNavDirection);
+                var childNavCoherence2 = Vector2.Dot(ref uiDir2, ref childNavDirection);
+                var distance = Rectangle.Distance(childBounds, location);
+                if (childNavCoherence1 > Mathf.Epsilon && childNavCoherence2 > Mathf.Epsilon && distance < minDistance)
+                {
+                    minDistance = distance;
+                    result = child;
+                }
+            }
+            return result;
+        }
+
+        #endregion
+
         /// <summary>
         /// Update contain focus state and all it's children
         /// </summary>
@@ -501,10 +648,10 @@ namespace FlaxEngine.GUI
 
             for (int i = 0; i < _children.Count; i++)
             {
-                if (_children[i] is ContainerControl child)
+                var control = _children[i];
+                if (control is ContainerControl child)
                     child.UpdateContainsFocus();
-
-                if (_children[i].ContainsFocus)
+                if (control.ContainsFocus)
                     result = true;
             }
 
diff --git a/Source/Engine/UI/GUI/Control.cs b/Source/Engine/UI/GUI/Control.cs
index 9c85ac9b7..fd20ab102 100644
--- a/Source/Engine/UI/GUI/Control.cs
+++ b/Source/Engine/UI/GUI/Control.cs
@@ -51,7 +51,7 @@ namespace FlaxEngine.GUI
 
         private ContainerControl _parent;
         private RootControl _root;
-        private bool _isDisposing, _isFocused;
+        private bool _isDisposing, _isFocused, _isNavFocused;
 
         // State
 
@@ -456,9 +456,9 @@ namespace FlaxEngine.GUI
         #region Focus
 
         /// <summary>
-        /// Gets a value indicating whether the control can receive automatic focus on user events (eg. mouse down).
+        /// If checked, the control can receive automatic focus (eg. on user click or UI navigation).
         /// </summary>
-        [HideInEditor, NoSerialize]
+        [EditorOrder(512), Tooltip("If checked, the control can receive automatic focus (eg. on user click or UI navigation).")]
         public bool AutoFocus
         {
             get => _autoFocus;
@@ -473,7 +473,12 @@ namespace FlaxEngine.GUI
         /// <summary>
         /// Gets a value indicating whether the control has input focus
         /// </summary>
-        public virtual bool IsFocused => _isFocused;
+        public bool IsFocused => _isFocused;
+
+        /// <summary>
+        /// Gets a value indicating whether the control has UI navigation focus.
+        /// </summary>
+        public bool IsNavFocused => _isNavFocused;
 
         /// <summary>
         /// Sets input focus to the control
@@ -505,6 +510,7 @@ namespace FlaxEngine.GUI
         {
             // Cache flag
             _isFocused = true;
+            _isNavFocused = false;
         }
 
         /// <summary>
@@ -515,6 +521,7 @@ namespace FlaxEngine.GUI
         {
             // Clear flag
             _isFocused = false;
+            _isNavFocused = false;
         }
 
         /// <summary>
@@ -575,6 +582,118 @@ namespace FlaxEngine.GUI
 
         #endregion
 
+        #region Navigation
+
+        /// <summary>
+        /// The explicitly specified target navigation control for <see cref="NavDirection.Up"/> direction.
+        /// </summary>
+        [HideInEditor, NoSerialize]
+        public Control NavTargetUp;
+
+        /// <summary>
+        /// The explicitly specified target navigation control for <see cref="NavDirection.Down"/> direction.
+        /// </summary>
+        [HideInEditor, NoSerialize]
+        public Control NavTargetDown;
+
+        /// <summary>
+        /// The explicitly specified target navigation control for <see cref="NavDirection.Left"/> direction.
+        /// </summary>
+        [HideInEditor, NoSerialize]
+        public Control NavTargetLeft;
+
+        /// <summary>
+        /// The explicitly specified target navigation control for <see cref="NavDirection.Right"/> direction.
+        /// </summary>
+        [HideInEditor, NoSerialize]
+        public Control NavTargetRight;
+
+        /// <summary>
+        /// Gets the next navigation control to focus for the given direction. Returns null for automated direction resolving.
+        /// </summary>
+        /// <param name="direction">The navigation direction.</param>
+        /// <returns>The target navigation control or null to use automatic navigation.</returns>
+        [NoAnimate]
+        public virtual Control GetNavTarget(NavDirection direction)
+        {
+            switch (direction)
+            {
+            case NavDirection.Up: return NavTargetUp;
+            case NavDirection.Down: return NavTargetDown;
+            case NavDirection.Left: return NavTargetLeft;
+            case NavDirection.Right: return NavTargetRight;
+            default: return null;
+            }
+        }
+
+        /// <summary>
+        /// Gets the navigation origin location for this control. It's the starting anchor point for searching navigable controls in the nearby area. By default the origin points are located on the control bounds edges.
+        /// </summary>
+        /// <param name="direction">The navigation direction.</param>
+        /// <returns>The navigation origin for the automatic navigation.</returns>
+        [NoAnimate]
+        public virtual Vector2 GetNavOrigin(NavDirection direction)
+        {
+            var size = Size;
+            switch (direction)
+            {
+            case NavDirection.Up: return new Vector2(size.X * 0.5f, 0);
+            case NavDirection.Down: return new Vector2(size.X * 0.5f, size.Y);
+            case NavDirection.Left: return new Vector2(0, size.Y * 0.5f);
+            case NavDirection.Right: return new Vector2(size.X, size.Y * 0.5f);
+            case NavDirection.Next: return Vector2.Zero;
+            default: return size * 0.5f;
+            }
+        }
+
+        /// <summary>
+        /// Performs the UI navigation for this control.
+        /// </summary>
+        /// <param name="direction">The navigation direction.</param>
+        /// <param name="location">The navigation start location (in the control-space).</param>
+        /// <param name="caller">The control that calls the event.</param>
+        /// <param name="visited">The list with visited controls. Used to skip recursive navigation calls when doing traversal across the UI hierarchy.</param>
+        /// <returns>The target navigation control or null if didn't performed any navigation.</returns>
+        public virtual Control OnNavigate(NavDirection direction, Vector2 location, Control caller, List<Control> visited)
+        {
+            if (caller == _parent && AutoFocus && Visible)
+                return this;
+            return _parent?.OnNavigate(direction, PointToParent(GetNavOrigin(direction)), caller, visited);
+        }
+
+        /// <summary>
+        /// Focuses the control by the UI navigation system. Called during navigating around UI with gamepad/keyboard navigation. Focuses the control and sets the <see cref="IsNavFocused"/> flag.
+        /// </summary>
+        public virtual void NavigationFocus()
+        {
+            Focus();
+            if (IsFocused)
+            {
+                _isNavFocused = true;
+
+                // Ensure to be in a view
+                var parent = Parent;
+                while (parent != null)
+                {
+                    if (parent is Panel panel && ((panel.VScrollBar != null && panel.VScrollBar.Enabled) || (panel.HScrollBar != null && panel.HScrollBar.Enabled)))
+                    {
+                        panel.ScrollViewTo(this);
+                        break;
+                    }
+                    parent = parent.Parent;
+                }
+            }
+        }
+
+        /// <summary>
+        /// Generic user interaction event for a control used by UI navigation (eg. user submits on the currently focused control).
+        /// </summary>
+        public virtual void OnSubmit()
+        {
+        }
+
+        #endregion
+
         #region Mouse
 
         /// <summary>
diff --git a/Source/Engine/UI/GUI/Enums.cs b/Source/Engine/UI/GUI/Enums.cs
index 6f73b8f07..3f55ecea9 100644
--- a/Source/Engine/UI/GUI/Enums.cs
+++ b/Source/Engine/UI/GUI/Enums.cs
@@ -167,4 +167,40 @@ namespace FlaxEngine.GUI
         /// </summary>
         Vertical = 1,
     }
+
+    /// <summary>
+    /// The navigation directions in the user interface layout.
+    /// </summary>
+    public enum NavDirection
+    {
+        /// <summary>
+        /// No direction to skip navigation.
+        /// </summary>
+        None,
+
+        /// <summary>
+        /// The up direction.
+        /// </summary>
+        Up,
+
+        /// <summary>
+        /// The down direction.
+        /// </summary>
+        Down,
+
+        /// <summary>
+        /// The left direction.
+        /// </summary>
+        Left,
+
+        /// <summary>
+        /// The right direction.
+        /// </summary>
+        Right,
+
+        /// <summary>
+        /// The next item (right with layout wrapping).
+        /// </summary>
+        Next,
+    }
 }
diff --git a/Source/Engine/UI/GUI/Panels/AlphaPanel.cs b/Source/Engine/UI/GUI/Panels/AlphaPanel.cs
index 0c21c2232..fbe438127 100644
--- a/Source/Engine/UI/GUI/Panels/AlphaPanel.cs
+++ b/Source/Engine/UI/GUI/Panels/AlphaPanel.cs
@@ -19,6 +19,14 @@ namespace FlaxEngine.GUI
         [EditorOrder(10), Tooltip("Whether or not we should ignore previous alphas.")]
         public bool IgnoreStack;
 
+        /// <summary>
+        /// Initializes a new instance of the <see cref="AlphaPanel"/> class.
+        /// </summary>
+        public AlphaPanel()
+        {
+            AutoFocus = false;
+        }
+
         /// <inheritdoc/>
         public override void Draw()
         {
diff --git a/Source/Engine/UI/GUI/Panels/BlurPanel.cs b/Source/Engine/UI/GUI/Panels/BlurPanel.cs
index a894ea71d..811282a29 100644
--- a/Source/Engine/UI/GUI/Panels/BlurPanel.cs
+++ b/Source/Engine/UI/GUI/Panels/BlurPanel.cs
@@ -19,6 +19,7 @@ namespace FlaxEngine.GUI
         /// </summary>
         public BlurPanel()
         {
+            AutoFocus = false;
         }
 
         /// <inheritdoc />
diff --git a/Source/Engine/UI/GUI/Panels/DropPanel.cs b/Source/Engine/UI/GUI/Panels/DropPanel.cs
index 04493c7ef..2318c2af3 100644
--- a/Source/Engine/UI/GUI/Panels/DropPanel.cs
+++ b/Source/Engine/UI/GUI/Panels/DropPanel.cs
@@ -560,5 +560,14 @@ namespace FlaxEngine.GUI
         {
             Arrange();
         }
+
+        /// <inheritdoc />
+        protected override bool CanNavigateChild(Control child)
+        {
+            // Closed panel skips navigation for hidden children
+            if (IsClosed && child.IsScrollable)
+                return false;
+            return base.CanNavigateChild(child);
+        }
     }
 }
diff --git a/Source/Engine/UI/GUI/Panels/GridPanel.cs b/Source/Engine/UI/GUI/Panels/GridPanel.cs
index 65119d8d1..24d4a8395 100644
--- a/Source/Engine/UI/GUI/Panels/GridPanel.cs
+++ b/Source/Engine/UI/GUI/Panels/GridPanel.cs
@@ -73,6 +73,7 @@ namespace FlaxEngine.GUI
         /// <param name="slotPadding">The slot padding.</param>
         public GridPanel(float slotPadding)
         {
+            AutoFocus = false;
             SlotPadding = new Margin(slotPadding);
             _cellsH = new[]
             {
diff --git a/Source/Engine/UI/GUI/Panels/UniformGridPanel.cs b/Source/Engine/UI/GUI/Panels/UniformGridPanel.cs
index 62c6a9744..9f89c1eb3 100644
--- a/Source/Engine/UI/GUI/Panels/UniformGridPanel.cs
+++ b/Source/Engine/UI/GUI/Panels/UniformGridPanel.cs
@@ -75,6 +75,7 @@ namespace FlaxEngine.GUI
         /// <param name="slotPadding">The slot padding.</param>
         public UniformGridPanel(float slotPadding = 2)
         {
+            AutoFocus = false;
             SlotPadding = new Margin(slotPadding);
             _slotsH = _slotsV = 5;
         }
diff --git a/Source/Engine/UI/GUI/RootControl.cs b/Source/Engine/UI/GUI/RootControl.cs
index 13f62397d..efd1a7fec 100644
--- a/Source/Engine/UI/GUI/RootControl.cs
+++ b/Source/Engine/UI/GUI/RootControl.cs
@@ -1,5 +1,6 @@
 // Copyright (c) 2012-2021 Wojciech Figat. All rights reserved.
 
+using System;
 using System.Collections.Generic;
 
 namespace FlaxEngine.GUI
@@ -69,6 +70,61 @@ namespace FlaxEngine.GUI
             AutoFocus = false;
         }
 
+        #region Navigation
+
+        /// <summary>
+        /// The custom callback function for UI navigation. Can be used to override the default behaviour.
+        /// </summary>
+        public Action<NavDirection> CustomNavigation;
+
+        /// <summary>
+        /// Performs the UI navigation.
+        /// </summary>
+        /// <param name="direction">The navigation direction.</param>
+        public void Navigate(NavDirection direction)
+        {
+            if (direction == NavDirection.None)
+                return;
+
+            if (CustomNavigation != null)
+            {
+                // Custom
+                CustomNavigation.Invoke(direction);
+                return;
+            }
+
+            var focused = FocusedControl;
+            if (focused == null)
+            {
+                // Nothing is focused so go to the first control
+                focused = OnNavigate(direction, Vector2.Zero, this, new List<Control>());
+                focused?.NavigationFocus();
+                return;
+            }
+
+            var target = focused.GetNavTarget(direction);
+            if (target != null)
+            {
+                // Explicitly specified focus target
+                target.NavigationFocus();
+                return;
+            }
+
+            // Automatic navigation routine
+            target = focused.OnNavigate(direction, focused.GetNavOrigin(direction), this, new List<Control>());
+            target?.NavigationFocus();
+        }
+
+        /// <summary>
+        /// Submits the currently focused control.
+        /// </summary>
+        public void SubmitFocused()
+        {
+            FocusedControl?.OnSubmit();
+        }
+
+        #endregion
+
         /// <inheritdoc />
         public override void Update(float deltaTime)
         {
diff --git a/Source/Engine/UI/UICanvas.cs b/Source/Engine/UI/UICanvas.cs
index 1a2bb4b6b..c6fede189 100644
--- a/Source/Engine/UI/UICanvas.cs
+++ b/Source/Engine/UI/UICanvas.cs
@@ -241,6 +241,59 @@ namespace FlaxEngine
             }
         }
 
+        #region Navigation
+
+        /// <summary>
+        /// The delay (in seconds) before a navigation input event starts repeating if input control is held down (Input Action mode is set to Pressing).
+        /// </summary>
+        [EditorOrder(505), EditorDisplay("Navigation", "Input Repeat Delay")]
+        [Tooltip("TheThe delay (in seconds) before a navigation input event starts repeating if input control is held down (Input Action mode is set to Pressing).")]
+        public float NavigationInputRepeatDelay { get; set; } = 0.5f;
+
+        /// <summary>
+        /// The delay (in seconds) between successive repeated navigation input events after the first one.
+        /// </summary>
+        [EditorOrder(506), EditorDisplay("Navigation", "Input Repeat Rate")]
+        [Tooltip("The delay (in seconds) between successive repeated navigation input events after the first one.")]
+        public float NavigationInputRepeatRate { get; set; } = 0.05f;
+
+        /// <summary>
+        /// The name of the input action for performing UI navigation Up (from Input Settings).
+        /// </summary>
+        [EditorOrder(510), EditorDisplay("Navigation", "Navigate Up")]
+        [Tooltip("The name of the input action for performing UI navigation Up (from Input Settings).")]
+        public string NavigationInputActionUp { get; set; } = "NavigateUp";
+
+        /// <summary>
+        /// The name of the input action for performing UI navigation Down (from Input Settings).
+        /// </summary>
+        [EditorOrder(520), EditorDisplay("Navigation", "Navigate Down")]
+        [Tooltip("The name of the input action for performing UI navigation Down (from Input Settings).")]
+        public string NavigationInputActionDown { get; set; } = "NavigateDown";
+
+        /// <summary>
+        /// The name of the input action for performing UI navigation Left (from Input Settings).
+        /// </summary>
+        [EditorOrder(530), EditorDisplay("Navigation", "Navigate Left")]
+        [Tooltip("The name of the input action for performing UI navigation Left (from Input Settings).")]
+        public string NavigationInputActionLeft { get; set; } = "NavigateLeft";
+
+        /// <summary>
+        /// The name of the input action for performing UI navigation Right (from Input Settings).
+        /// </summary>
+        [EditorOrder(540), EditorDisplay("Navigation", "Navigate Right")]
+        [Tooltip("The name of the input action for performing UI navigation Right (from Input Settings).")]
+        public string NavigationInputActionRight { get; set; } = "NavigateRight";
+
+        /// <summary>
+        /// The name of the input action for performing UI navigation Submit (from Input Settings).
+        /// </summary>
+        [EditorOrder(540), EditorDisplay("Navigation", "Navigate Submit")]
+        [Tooltip("The name of the input action for performing UI navigation Submit (from Input Settings).")]
+        public string NavigationInputActionSubmit { get; set; } = "NavigateSubmit";
+
+        #endregion
+
         /// <summary>
         /// Initializes a new instance of the <see cref="UICanvas"/> class.
         /// </summary>
@@ -546,6 +599,19 @@ namespace FlaxEngine
                     jsonWriter.WriteEndObject();
                 }
 
+                jsonWriter.WritePropertyName("NavigationInputRepeatDelay");
+                jsonWriter.WriteValue(NavigationInputRepeatDelay);
+                jsonWriter.WritePropertyName("NavigationInputRepeatRate");
+                jsonWriter.WriteValue(NavigationInputRepeatRate);
+                jsonWriter.WritePropertyName("NavigationInputActionUp");
+                jsonWriter.WriteValue(NavigationInputActionUp);
+                jsonWriter.WritePropertyName("NavigationInputActionDown");
+                jsonWriter.WriteValue(NavigationInputActionDown);
+                jsonWriter.WritePropertyName("NavigationInputActionLeft");
+                jsonWriter.WriteValue(NavigationInputActionLeft);
+                jsonWriter.WritePropertyName("NavigationInputActionRight");
+                jsonWriter.WriteValue(NavigationInputActionRight);
+
                 jsonWriter.WriteEndObject();
             }
 
@@ -620,6 +686,37 @@ namespace FlaxEngine
                     jsonWriter.WriteEndObject();
                 }
 
+                if (!Mathf.NearEqual(NavigationInputRepeatDelay, other.NavigationInputRepeatDelay))
+                {
+                    jsonWriter.WritePropertyName("NavigationInputRepeatDelay");
+                    jsonWriter.WriteValue(NavigationInputRepeatDelay);
+                }
+                if (!Mathf.NearEqual(NavigationInputRepeatRate, other.NavigationInputRepeatRate))
+                {
+                    jsonWriter.WritePropertyName("NavigationInputRepeatRate");
+                    jsonWriter.WriteValue(NavigationInputRepeatRate);
+                }
+                if (NavigationInputActionUp != other.NavigationInputActionUp)
+                {
+                    jsonWriter.WritePropertyName("NavigationInputActionUp");
+                    jsonWriter.WriteValue(NavigationInputActionUp);
+                }
+                if (NavigationInputActionDown != other.NavigationInputActionDown)
+                {
+                    jsonWriter.WritePropertyName("NavigationInputActionDown");
+                    jsonWriter.WriteValue(NavigationInputActionDown);
+                }
+                if (NavigationInputActionLeft != other.NavigationInputActionLeft)
+                {
+                    jsonWriter.WritePropertyName("NavigationInputActionLeft");
+                    jsonWriter.WriteValue(NavigationInputActionLeft);
+                }
+                if (NavigationInputActionRight != other.NavigationInputActionRight)
+                {
+                    jsonWriter.WritePropertyName("NavigationInputActionRight");
+                    jsonWriter.WriteValue(NavigationInputActionRight);
+                }
+
                 jsonWriter.WriteEndObject();
             }
 
diff --git a/Source/Engine/UI/UIControl.cpp b/Source/Engine/UI/UIControl.cpp
index 36e4f732e..ae370e9b8 100644
--- a/Source/Engine/UI/UIControl.cpp
+++ b/Source/Engine/UI/UIControl.cpp
@@ -73,6 +73,10 @@ void UIControl::Serialize(SerializeStream& stream, const void* otherObj)
     Actor::Serialize(stream, otherObj);
 
     SERIALIZE_GET_OTHER_OBJ(UIControl);
+    SERIALIZE_MEMBER(NavTargetUp, _navTargetUp);
+    SERIALIZE_MEMBER(NavTargetDown, _navTargetDown);
+    SERIALIZE_MEMBER(NavTargetLeft, _navTargetLeft);
+    SERIALIZE_MEMBER(NavTargetRight, _navTargetRight);
 
 #if !COMPILE_WITHOUT_CSHARP
     void* params[2];
@@ -124,6 +128,11 @@ void UIControl::Deserialize(DeserializeStream& stream, ISerializeModifier* modif
     // Base
     Actor::Deserialize(stream, modifier);
 
+    DESERIALIZE_MEMBER(NavTargetUp, _navTargetUp);
+    DESERIALIZE_MEMBER(NavTargetDown, _navTargetDown);
+    DESERIALIZE_MEMBER(NavTargetLeft, _navTargetLeft);
+    DESERIALIZE_MEMBER(NavTargetRight, _navTargetRight);
+
 #if !COMPILE_WITHOUT_CSHARP
     MonoReflectionType* typeObj = nullptr;
     const auto controlMember = stream.FindMember("Control");
@@ -212,3 +221,23 @@ void UIControl::OnActiveInTreeChanged()
     // Base
     Actor::OnActiveInTreeChanged();
 }
+
+#if !COMPILE_WITHOUT_CSHARP
+
+void UIControl::GetNavTargets(UIControl*& up, UIControl*& down, UIControl*& left, UIControl*& right) const
+{
+    up = _navTargetUp;
+    down = _navTargetDown;
+    left = _navTargetLeft;
+    right = _navTargetRight;
+}
+
+void UIControl::SetNavTargets(UIControl* up, UIControl* down, UIControl* left, UIControl* right)
+{
+    _navTargetUp = up;
+    _navTargetDown = down;
+    _navTargetLeft = left;
+    _navTargetRight = right;
+}
+
+#endif
diff --git a/Source/Engine/UI/UIControl.cs b/Source/Engine/UI/UIControl.cs
index d981c1b6c..a6b09689e 100644
--- a/Source/Engine/UI/UIControl.cs
+++ b/Source/Engine/UI/UIControl.cs
@@ -181,6 +181,106 @@ namespace FlaxEngine
             }
         }
 
+        #region Navigation
+
+        /// <summary>
+        /// The explicitly specified target navigation control for <see cref="NavDirection.Up"/> direction.
+        /// </summary>
+        [Tooltip("The explicitly specified target navigation control for Up direction. Leave empty to use automatic navigation.")]
+        [EditorDisplay("Navigation"), EditorOrder(1010), VisibleIf(nameof(HasControl))]
+        public UIControl NavTargetUp
+        {
+            get
+            {
+                Internal_GetNavTargets(__unmanagedPtr, out UIControl up, out _, out _, out _);
+                return up;
+            }
+            set
+            {
+                Internal_GetNavTargets(__unmanagedPtr, out UIControl up, out UIControl down, out UIControl left, out UIControl right);
+                if (up == value)
+                    return;
+                up = value;
+                Internal_SetNavTargets(__unmanagedPtr, GetUnmanagedPtr(up), GetUnmanagedPtr(down), GetUnmanagedPtr(left), GetUnmanagedPtr(right));
+                if (_control != null)
+                    _control.NavTargetUp = value?.Control;
+            }
+        }
+
+        /// <summary>
+        /// The explicitly specified target navigation control for <see cref="NavDirection.Down"/> direction.
+        /// </summary>
+        [Tooltip("The explicitly specified target navigation control for Down direction. Leave empty to use automatic navigation.")]
+        [EditorDisplay("Navigation"), EditorOrder(1020), VisibleIf(nameof(HasControl))]
+        public UIControl NavTargetDown
+        {
+            get
+            {
+                Internal_GetNavTargets(__unmanagedPtr, out _, out UIControl down, out _, out _);
+                return down;
+            }
+            set
+            {
+                Internal_GetNavTargets(__unmanagedPtr, out UIControl up, out UIControl down, out UIControl left, out UIControl right);
+                if (down == value)
+                    return;
+                down = value;
+                Internal_SetNavTargets(__unmanagedPtr, GetUnmanagedPtr(up), GetUnmanagedPtr(down), GetUnmanagedPtr(left), GetUnmanagedPtr(right));
+                if (_control != null)
+                    _control.NavTargetDown = value?.Control;
+            }
+        }
+
+        /// <summary>
+        /// The explicitly specified target navigation control for <see cref="NavDirection.Left"/> direction.
+        /// </summary>
+        [Tooltip("The explicitly specified target navigation control for Left direction. Leave empty to use automatic navigation.")]
+        [EditorDisplay("Navigation"), EditorOrder(1030), VisibleIf(nameof(HasControl))]
+        public UIControl NavTargetLeft
+        {
+            get
+            {
+                Internal_GetNavTargets(__unmanagedPtr, out _, out _, out UIControl left, out _);
+                return left;
+            }
+            set
+            {
+                Internal_GetNavTargets(__unmanagedPtr, out UIControl up, out UIControl down, out UIControl left, out UIControl right);
+                if (left == value)
+                    return;
+                left = value;
+                Internal_SetNavTargets(__unmanagedPtr, GetUnmanagedPtr(up), GetUnmanagedPtr(down), GetUnmanagedPtr(left), GetUnmanagedPtr(right));
+                if (_control != null)
+                    _control.NavTargetLeft = value?.Control;
+            }
+        }
+
+        /// <summary>
+        /// The explicitly specified target navigation control for <see cref="NavDirection.Right"/> direction.
+        /// </summary>
+        [Tooltip("The explicitly specified target navigation control for Right direction. Leave empty to use automatic navigation.")]
+        [EditorDisplay("Navigation"), EditorOrder(1040), VisibleIf(nameof(HasControl))]
+        public UIControl NavTargetRight
+        {
+            get
+            {
+                Internal_GetNavTargets(__unmanagedPtr, out _, out _, out _, out UIControl right);
+                return right;
+            }
+            set
+            {
+                Internal_GetNavTargets(__unmanagedPtr, out UIControl up, out UIControl down, out UIControl left, out UIControl right);
+                if (right == value)
+                    return;
+                right = value;
+                Internal_SetNavTargets(__unmanagedPtr, GetUnmanagedPtr(up), GetUnmanagedPtr(down), GetUnmanagedPtr(left), GetUnmanagedPtr(right));
+                if (_control != null)
+                    _control.NavTargetRight = value?.Control;
+            }
+        }
+
+        #endregion
+
         private void OnControlLocationChanged(Control control)
         {
             _blockEvents = true;
@@ -353,6 +453,11 @@ namespace FlaxEngine
             {
                 _control.Parent = GetParent();
                 _control.IndexInParent = OrderInParent;
+                Internal_GetNavTargets(__unmanagedPtr, out UIControl up, out UIControl down, out UIControl left, out UIControl right);
+                _control.NavTargetUp = up?.Control;
+                _control.NavTargetDown = down?.Control;
+                _control.NavTargetLeft = left?.Control;
+                _control.NavTargetRight = right?.Control;
             }
         }
 
diff --git a/Source/Engine/UI/UIControl.h b/Source/Engine/UI/UIControl.h
index 5d7023006..9dd964550 100644
--- a/Source/Engine/UI/UIControl.h
+++ b/Source/Engine/UI/UIControl.h
@@ -3,15 +3,18 @@
 #pragma once
 
 #include "Engine/Level/Actor.h"
+#include "Engine/Scripting/ScriptingObjectReference.h"
 
 /// <summary>
 /// Contains a single GUI control (on C# side).
 /// </summary>
 API_CLASS(Sealed) class FLAXENGINE_API UIControl : public Actor
 {
-DECLARE_SCENE_OBJECT(UIControl);
-public:
+    DECLARE_SCENE_OBJECT(UIControl);
+private:
+    ScriptingObjectReference<UIControl> _navTargetUp, _navTargetDown, _navTargetLeft, _navTargetRight;
 
+public:
     // [Actor]
 #if USE_EDITOR
     BoundingBox GetEditorBox() const override;
@@ -20,7 +23,6 @@ public:
     void Deserialize(DeserializeStream& stream, ISerializeModifier* modifier) override;
 
 protected:
-
     // [Actor]
     void OnParentChanged() override;
     void OnTransformChanged() override;
@@ -28,4 +30,11 @@ protected:
     void OnEndPlay() override;
     void OnOrderInParentChanged() override;
     void OnActiveInTreeChanged() override;
+
+private:
+#if !COMPILE_WITHOUT_CSHARP
+    // Internal bindings
+    API_FUNCTION(NoProxy) void GetNavTargets(API_PARAM(Out) UIControl*& up, API_PARAM(Out) UIControl*& down, API_PARAM(Out) UIControl*& left, API_PARAM(Out) UIControl*& right) const;
+    API_FUNCTION(NoProxy) void SetNavTargets(UIControl* up, UIControl* down, UIControl* left, UIControl* right);
+#endif
 };