Merge pull request #105 from irihitech/nav

Nav Menu Refactoring Step 1.

demo/Ursa.Demo/Converters/IconNameToPathConverter.cs

@@ -0,0 +1,36 @@
+using System;
+using System.Globalization;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+
+namespace Ursa.Demo.Converters;
+
+public class IconNameToPathConverter: IValueConverter
+{
+    private string[] paths = new[]
+    {
+        "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z",
+        "M16 12L9 2L2 12H3.86L0 18H7V22H11V18H18L14.14 12H16M20.14 12H22L15 2L12.61 5.41L17.92 13H15.97L19.19 18H24L20.14 12M13 19H17V22H13V19Z",
+        "M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z",
+        "M5 21C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5M15.3 16L13.2 13.9L17 10L14.2 7.2L10.4 11.1L8.2 8.9V16H15.3Z",
+        "M16,9V7H12V12.5C11.58,12.19 11.07,12 10.5,12A2.5,2.5 0 0,0 8,14.5A2.5,2.5 0 0,0 10.5,17A2.5,2.5 0 0,0 13,14.5V9H16M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z",
+        "M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z",
+        "M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12S17.5 2 12 2M12.5 13H11V7H12.5V11.3L16.2 9.2L17 10.5L12.5 13Z"
+    };
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is int i)
+        {
+            string s = paths[i % paths.Length];
+            return StreamGeometry.Parse(s);
+        }
+        return AvaloniaProperty.UnsetValue;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        return AvaloniaProperty.UnsetValue;
+    }
+}

demo/Ursa.Demo/Models/MenuKeys.cs

@@ -19,6 +19,7 @@ public static class MenuKeys
     public const string MenuKeyLoading = "Loading";
     public const string MenuKeyMessageBox = "MessageBox";
     public const string MenuKeyNavigation = "Navigation";
+    public const string MenuKeyNavMenu = "NavMenu";
     public const string MenuKeyNumericUpDown = "NumericUpDown";
     public const string MenuKeyPagination = "Pagination";
     public const string MenuKeyRangeSlider = "RangeSlider";

demo/Ursa.Demo/Pages/NavMenuDemo.axaml

@@ -0,0 +1,123 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.NavMenuDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="clr-namespace:Ursa.Demo.Converters"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:u="https://irihi.tech/ursa"
+    xmlns:vm="using:Ursa.Demo.ViewModels"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:NavMenuDemoViewModel"
+    mc:Ignorable="d">
+    <UserControl.Resources>
+        <converters:IconNameToPathConverter x:Key="IconConverter" />
+    </UserControl.Resources>
+    <Grid
+        HorizontalAlignment="Left"
+        ColumnDefinitions="Auto, Auto"
+        RowDefinitions="Auto, Auto, *">
+        <ToggleButton
+            Name="collapse"
+            Grid.Row="0"
+            Grid.Column="0"
+            Grid.ColumnSpan="2">
+            Collapse
+        </ToggleButton>
+        <StackPanel Grid.Row="1" Grid.Column="0">
+            <TextBlock Text="{Binding SelectedMenuItem.Header}" />
+            <Button Command="{Binding RandomCommand}">Random a selection</Button>
+        </StackPanel>
+        <Border
+            Grid.Row="2"
+            Grid.Column="0"
+            Padding="0"
+            HorizontalAlignment="Left"
+            Theme="{DynamicResource CardBorder}">
+            <u:NavMenu
+                Name="menu"
+                HeaderBinding="{Binding Header}"
+                IconBinding="{Binding IconIndex}"
+                IsHorizontalCollapsed="{Binding #collapse.IsChecked, Mode=OneWay}"
+                ItemsSource="{Binding MenuItems}"
+                SelectedItem="{Binding SelectedMenuItem}"
+                SubMenuBinding="{Binding Children}">
+                <u:NavMenu.Styles>
+                    <Style x:DataType="vm:MenuItem" Selector="u|NavMenuItem">
+                        <Setter Property="IsSeparator" Value="{Binding IsSeparator}" />
+                    </Style>
+                </u:NavMenu.Styles>
+                <u:NavMenu.IconTemplate>
+                    <DataTemplate DataType="{x:Type x:Int32}">
+                        <u:TwoTonePathIcon
+                            Width="16"
+                            Height="16"
+                            ActiveForeground="{DynamicResource SemiBlue5}"
+                            ActiveStrokeBrush="{DynamicResource SemiBlue5}"
+                            Data="{Binding Converter={StaticResource IconConverter}}"
+                            Foreground="{DynamicResource SemiGrey5}"
+                            IsActive="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=u:NavMenuItem}, Path=IsHighlighted, Mode=TwoWay}"
+                            StrokeBrush="{DynamicResource SemiGrey5}" />
+                    </DataTemplate>
+                </u:NavMenu.IconTemplate>
+                <u:NavMenu.Header>
+                    <Grid HorizontalAlignment="Center" ColumnDefinitions="Auto, Auto">
+                        <Image
+                            Width="48"
+                            Height="48"
+                            Margin="4,12"
+                            u:NavMenu.CanToggle="True"
+                            RenderOptions.BitmapInterpolationMode="HighQuality"
+                            Source="../Assets/Ursa.ico" />
+                        <TextBlock
+                            Grid.Column="1"
+                            VerticalAlignment="Center"
+                            Classes="H5"
+                            IsVisible="{Binding !#menu.IsHorizontalCollapsed}"
+                            Text="Ursa Avalonia"
+                            Theme="{DynamicResource TitleTextBlock}" />
+                    </Grid>
+                </u:NavMenu.Header>
+            </u:NavMenu>
+        </Border>
+        <TextBlock
+            Grid.Row="1"
+            Grid.Column="1"
+            Text="{ReflectionBinding #menu2.SelectedItem.Header}" />
+        <u:NavMenu
+            Name="menu2"
+            Grid.Row="2"
+            Grid.Column="1"
+            IsHorizontalCollapsed="{Binding #collapse.IsChecked}">
+            <u:NavMenuItem Header="Menu 1">
+                <u:NavMenuItem.Icon>
+                    <Rectangle
+                        Width="10"
+                        Height="10"
+                        Fill="Red" />
+                </u:NavMenuItem.Icon>
+                <u:NavMenuItem Header="Sub Menu 1" />
+                <u:NavMenuItem Header="Sub Menu 2" />
+                <u:NavMenuItem Header="Sub Menu 3" />
+            </u:NavMenuItem>
+            <u:NavMenuItem Header="Menu 2">
+                <u:NavMenuItem.Icon>
+                    <Rectangle
+                        Width="10"
+                        Height="10"
+                        Fill="Red" />
+                </u:NavMenuItem.Icon>
+            </u:NavMenuItem>
+            <u:NavMenuItem Header="Menu 3">
+                <u:NavMenuItem.Icon>
+                    <Rectangle
+                        Width="10"
+                        Height="10"
+                        Fill="Red" />
+                </u:NavMenuItem.Icon>
+            </u:NavMenuItem>
+        </u:NavMenu>
+    </Grid>
+</UserControl>

demo/Ursa.Demo/Pages/NavMenuDemo.axaml.cs

@@ -0,0 +1,27 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Shapes;
+using Avalonia.Input;
+using Avalonia.LogicalTree;
+using Avalonia.Markup.Xaml;
+using Ursa.Demo.ViewModels;
+
+namespace Ursa.Demo.Pages;
+
+public partial class NavMenuDemo : UserControl
+{
+    public NavMenuDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new NavMenuDemoViewModel();
+    }
+
+    private void InputElement_OnPointerPressed(object? sender, PointerPressedEventArgs e)
+    {
+        if (sender is Rectangle c)
+        {
+            c.ApplyStyling();
+            var ancestors = c.GetLogicalAncestors();
+        }
+    }
+}

demo/Ursa.Demo/ViewModels/MainViewViewModel.cs

@@ -41,6 +41,7 @@ public class MainViewViewModel : ViewModelBase
             MenuKeys.MenuKeyLoading => new LoadingDemoViewModel(),
             MenuKeys.MenuKeyMessageBox => new MessageBoxDemoViewModel(),
             MenuKeys.MenuKeyNavigation => new NavigationMenuDemoViewModel(),
+            MenuKeys.MenuKeyNavMenu => new NavMenuDemoViewModel(),
             MenuKeys.MenuKeyNumericUpDown => new NumericUpDownDemoViewModel(),
             MenuKeys.MenuKeyPagination => new PaginationDemoViewModel(),
             MenuKeys.MenuKeyRangeSlider => new RangeSliderDemoViewModel(),

demo/Ursa.Demo/ViewModels/MenuViewModel.cs

@@ -28,6 +28,7 @@ public class MenuViewModel: ViewModelBase
             new() { MenuHeader = "Loading", Key = MenuKeys.MenuKeyLoading },
             new() { MenuHeader = "Message Box", Key = MenuKeys.MenuKeyMessageBox, Status = "New" },
             new() { MenuHeader = "Navigation", Key = MenuKeys.MenuKeyNavigation, Status = "WIP" },
+            new() { MenuHeader = "Nav Menu", Key = MenuKeys.MenuKeyNavMenu, Status = "WIP"},
             new() { MenuHeader = "NumericUpDown", Key = MenuKeys.MenuKeyNumericUpDown, Status = "New" },
             new() { MenuHeader = "Pagination", Key = MenuKeys.MenuKeyPagination },
             new() { MenuHeader = "RangeSlider", Key = MenuKeys.MenuKeyRangeSlider, Status = "New"},

demo/Ursa.Demo/ViewModels/NavMenuDemoViewModel.cs

@@ -0,0 +1,130 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Threading.Tasks;
+using System.Windows.Input;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Ursa.Controls;
+namespace Ursa.Demo.ViewModels;
+
+public class NavMenuDemoViewModel: ObservableObject
+{
+    private MenuItem? _selectedMenuItem;
+
+    public MenuItem? SelectedMenuItem
+    {
+        get=>_selectedMenuItem;
+        set => SetProperty(ref _selectedMenuItem, value);
+    }
+    public ObservableCollection<MenuItem> MenuItems { get; set; } = new ObservableCollection<MenuItem>
+    {
+        new MenuItem { Header = "Introduction" , Children =
+        {
+            new MenuItem() { Header = "Getting Started", Children =
+            {
+                new MenuItem() { Header = "Code of Conduct" },
+                new MenuItem() { Header = "How to Contribute" },
+                new MenuItem() { Header = "Development Workflow" },
+            }},
+            new MenuItem() { Header = "Design Principles"},
+            new MenuItem() { Header = "Contributing", Children =
+            {
+                new MenuItem() { Header = "Code of Conduct" },
+                new MenuItem() { Header = "How to Contribute" },
+                new MenuItem() { Header = "Development Workflow" },
+            }},
+        }},
+        new MenuItem { Header = "Controls", IsSeparator = true},
+        new MenuItem { Header = "Badge" },
+        new MenuItem { Header = "Banner" },
+        new MenuItem { Header = "ButtonGroup" },
+        new MenuItem { Header = "Class Input" },
+        new MenuItem { Header = "Dialog" },
+        new MenuItem { Header = "Divider" },
+        new MenuItem { Header = "Drawer" },
+        new MenuItem { Header = "DualBadge" },
+        new MenuItem { Header = "EnumSelector" },
+        new MenuItem { Header = "ImageViewer" },
+        new MenuItem { Header = "IPv4Box" },
+        new MenuItem { Header = "IconButton" },
+        new MenuItem { Header = "KeyGestureInput" },
+        new MenuItem { Header = "Loading" },
+        new MenuItem { Header = "MessageBox" },
+        new MenuItem { Header = "Navigation" },
+        new MenuItem { Header = "NavMenu" },
+        new MenuItem { Header = "NumericUpDown" },
+        new MenuItem { Header = "Pagination" },
+        new MenuItem { Header = "RangeSlider" },
+        new MenuItem { Header = "SelectionList" },
+        new MenuItem { Header = "TagInput" },
+        new MenuItem { Header = "Timeline" },
+        new MenuItem { Header = "TwoTonePathIcon" },
+        new MenuItem { Header = "ThemeToggler" }
+    };
+
+    public ICommand RandomCommand { get; set; }
+    public NavMenuDemoViewModel()
+    {
+        RandomCommand = new RelayCommand(OnRandom);
+    }
+
+    private void OnRandom()
+    {
+        var items = GetLeaves();
+        var index = new Random().Next(items.Count);
+        SelectedMenuItem = items[index];
+    }
+    
+    private List<MenuItem> GetLeaves()
+    {
+        List<MenuItem> items = new();
+        foreach (var item in MenuItems)
+        {
+            items.AddRange(item.GetLeaves());
+        }
+
+        return items;
+    }
+}
+
+public class MenuItem
+{
+    static Random r = new Random();
+    
+    public string? Header { get; set; }
+    public int IconIndex { get; set; }
+    public bool IsSeparator { get; set; }
+    public ICommand NavigationCommand { get; set; }
+
+    public MenuItem()
+    {
+        NavigationCommand = new AsyncRelayCommand(OnNavigate);
+        IconIndex = r.Next(100);
+    }
+
+    private async Task OnNavigate()
+    {
+        await MessageBox.ShowOverlayAsync(Header??string.Empty, "Navigation Result");
+    }
+
+    public ObservableCollection<MenuItem> Children { get; set; } = new ObservableCollection<MenuItem>();
+
+    public IEnumerable<MenuItem> GetLeaves()
+    {
+        if (this.Children.Count == 0)
+        {
+            yield return this;
+            yield break;
+        }
+
+        foreach (var child in Children)
+        {
+            var items = child.GetLeaves();
+            foreach (var item in items)
+            {
+                yield return item;
+            }
+        }
+    }
+}

src/Ursa.Themes.Semi/Controls/NavMenu.axaml

@@ -0,0 +1,222 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="clr-namespace:Ursa.Themes.Semi.Converters"
+    xmlns:u="https://irihi.tech/ursa">
+    <!--  Add Resources Here  -->
+
+    <converters:NavMenuMarginConverter x:Key="NavMarginConverter" />
+
+    <ControlTheme x:Key="{x:Type u:NavMenu}" TargetType="u:NavMenu">
+        <Setter Property="Grid.IsSharedSizeScope" Value="True" />
+        <Setter Property="SubMenuIndent" Value="24" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:NavMenu">
+                <DockPanel LastChildFill="True">
+                    <ContentPresenter Content="{TemplateBinding Header}" DockPanel.Dock="Top"></ContentPresenter>
+                    <ContentPresenter Content="{TemplateBinding Footer}" DockPanel.Dock="Bottom"></ContentPresenter>
+                    <ScrollViewer HorizontalAlignment="Center" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+                        <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
+                    </ScrollViewer>
+                </DockPanel>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:horizontal-collapsed">
+            <Setter Property="Width" Value="{x:Static x:Double.NaN}"></Setter>
+            <Setter Property="HorizontalAlignment" Value="Left"></Setter>
+        </Style>
+    </ControlTheme>
+
+    <ControlTemplate x:Key="DefaultNavMenuItemTemplate" TargetType="u:NavMenuItem">
+        <Grid RowDefinitions="Auto, *">
+            <Border
+                Name="PART_Border"
+                Grid.Row="0"
+                MinHeight="32"
+                Cursor="Hand"
+                Background="{TemplateBinding u:NavMenuItem.Background}"
+                CornerRadius="4">
+                <Grid
+                    Name="PART_RootGrid"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Center">
+                    <Grid.Margin>
+                        <MultiBinding Converter="{StaticResource NavMarginConverter}">
+                            <Binding Path="SubMenuIndent" RelativeSource="{RelativeSource TemplatedParent}" />
+                            <Binding Path="Level" RelativeSource="{RelativeSource TemplatedParent}" />
+                            <Binding Path="IsHorizontalCollapsed" RelativeSource="{RelativeSource TemplatedParent}" />
+                        </MultiBinding>
+                    </Grid.Margin>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" SharedSizeGroup="Icon" />
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="Auto" SharedSizeGroup="Expander" />
+                    </Grid.ColumnDefinitions>
+                    <ContentPresenter
+                        Name="PART_IconPresenter"
+                        Padding="8"
+                        HorizontalAlignment="Left"
+                        Background="Transparent"
+                        Content="{Binding Icon, RelativeSource={RelativeSource TemplatedParent}}"
+                        ContentTemplate="{Binding IconTemplate, RelativeSource={RelativeSource TemplatedParent}}" />
+                    <ContentPresenter
+                        Name="PART_HeaderPresenter"
+                        Grid.Column="1"
+                        Padding="0,8"
+                        Background="Transparent"
+                        Content="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}"
+                        ContentTemplate="{Binding HeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}" />
+                    <PathIcon
+                        Name="PART_ExpanderIcon"
+                        Grid.Column="2"
+                        Width="8"
+                        Height="8"
+                        Margin="12,0"
+                        Data="{DynamicResource NavigationMenuItemExpandIconGlyph}"
+                        Foreground="{DynamicResource NavigationMenuItemExpandIconForeground}">
+                        <PathIcon.Transitions>
+                            <Transitions>
+                                <TransformOperationsTransition Property="RenderTransform" Duration="0.1" />
+                            </Transitions>
+                        </PathIcon.Transitions>
+                    </PathIcon>
+                    <Popup
+                        Name="PART_Popup"
+                        Grid.Column="0"
+                        IsLightDismissEnabled="True"
+                        Placement="RightEdgeAlignedTop"
+                        PlacementTarget="{Binding #PART_Border}">
+                        <Border
+                            Margin="{DynamicResource NavigationMenuItemFlyoutMargin}"
+                            Padding="{DynamicResource MenuFlyoutPadding}"
+                            HorizontalAlignment="Stretch"
+                            Background="{DynamicResource MenuFlyoutBackground}"
+                            BorderBrush="{DynamicResource MenuFlyoutBorderBrush}"
+                            BorderThickness="{DynamicResource MenuFlyoutBorderThickness}"
+                            BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}"
+                            CornerRadius="{DynamicResource MenuFlyoutCornerRadius}">
+                            <StackPanel Name="PART_OverflowPanel" />
+                        </Border>
+                    </Popup>
+                </Grid>
+            </Border>
+            <ItemsPresenter
+                Name="PART_ItemsPresenter"
+                Grid.Row="1"
+                Margin="0,4,0,0"
+                VerticalAlignment="Top"
+                Grid.IsSharedSizeScope="True"
+                ItemsPanel="{Binding ItemsPanel, RelativeSource={RelativeSource TemplatedParent}}"
+                RenderTransformOrigin="0.5,0">
+                <ItemsPresenter.Transitions>
+                    <Transitions>
+                        <DoubleTransition Property="Height" Duration="0.1" />
+                        <TransformOperationsTransition Property="RenderTransform" Duration="0.1" />
+                    </Transitions>
+                </ItemsPresenter.Transitions>
+            </ItemsPresenter>
+        </Grid>
+    </ControlTemplate>
+    <ControlTheme x:Key="{x:Type u:NavMenuItem}" TargetType="u:NavMenuItem">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
+        <Setter Property="ItemsPanel">
+            <ItemsPanelTemplate>
+                <u:OverflowStackPanel />
+            </ItemsPanelTemplate>
+        </Setter>
+        <Setter Property="Template" Value="{StaticResource DefaultNavMenuItemTemplate}" />
+        <Style Selector="^:selected">
+            <Setter Property="Background" Value="{DynamicResource NavigationMenuItemSelectedBackground}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="Background" Value="{DynamicResource NavigationMenuItemSelectedBackground}" />
+            </Style>
+        </Style>
+        <Style Selector="^:vertical-collapsed /template/ ItemsPresenter#PART_ItemsPresenter">
+            <Setter Property="Height" Value="0" />
+            <Setter Property="RenderTransform" Value="scale(1,0)" />
+        </Style>
+        <Style Selector="^:vertical-collapsed /template/ PathIcon#PART_ExpanderIcon">
+            <Setter Property="RenderTransform" Value="rotate(180deg)" />
+        </Style>
+        <Style Selector="^:empty /template/ PathIcon#PART_ExpanderIcon">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+        <Style Selector="^ /template/ Border#PART_Border:pointerover">
+            <Setter Property="Background" Value="{DynamicResource NavigationMenuItemPointeroverBackground}" />
+        </Style>
+        <Style Selector="^:horizontal-collapsed:first-level">
+            <Setter Property="HorizontalAlignment" Value="Left"></Setter>
+            <Style Selector="^ /template/ Border#PART_Border">
+                <Setter Property="ToolTip.Tip" Value="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}" />
+                <Setter Property="ToolTip.ShowDelay" Value="0" />
+                <Setter Property="HorizontalAlignment" Value="Left" />
+            </Style>
+            <Style Selector="^ /template/ Border#PART_Border:pointerover">
+                <Setter Property="Background" Value="{DynamicResource NavigationMenuItemPointeroverBackground}" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="Grid.ColumnSpan" Value="3" />
+                <Setter Property="Margin" Value="0 8"></Setter>
+                <Setter Property="HorizontalAlignment" Value="Center" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+            <Style Selector="^ /template/ PathIcon#PART_ExpanderIcon">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+            <Style Selector="^ /template/ ItemsPresenter#PART_ItemsPresenter">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+            <Style Selector="^ /template/ Grid#PART_RootGrid">
+                <Setter Property="HorizontalAlignment" Value="Left" />
+            </Style>
+            
+        </Style>
+        <Style Selector="^:horizontal-collapsed:not(:first-level)">
+            <Style Selector="^ /template/ PathIcon#PART_ExpanderIcon">
+                <Setter Property="RenderTransform" Value="rotate(-90deg)" />
+            </Style>
+        </Style>
+        <Style Selector="^[IsSeparator=True]">
+            <Setter Property="Template">
+                <ControlTemplate>
+                    <StackPanel Cursor="No" Name="PART_RootPanel" Margin="{DynamicResource NavigationMenuSeparatorMargin}">
+                        <ContentPresenter
+                            Name="PART_HeaderPresenter"
+                            Margin="{DynamicResource NavigationMenuSeparatorHeaderMargin}"
+                            HorizontalAlignment="Left"
+                            Content="{TemplateBinding Header}"
+                            ContentTemplate="{TemplateBinding HeaderTemplate}"
+                            Foreground="{DynamicResource TextBlockQuaternaryForeground}"
+                            IsVisible="{TemplateBinding Header, Converter={x:Static ObjectConverters.IsNotNull}}">
+                            <ContentPresenter.Styles>
+                                <Style Selector="TextBlock">
+                                    <Setter Property="FontSize" Value="{DynamicResource NavigationMenuSeparatorHeaderFontSize}" />
+                                </Style>
+                            </ContentPresenter.Styles>
+                        </ContentPresenter>
+                        <Rectangle
+                            Name="PART_SeparatorBorder"
+                            Height="{DynamicResource NavigationMenuSeparatorBorderHeight}"
+                            Margin="{DynamicResource NavigationMenuSeparatorBorderMargin}"
+                            HorizontalAlignment="Stretch"
+                            Fill="{DynamicResource SemiColorBorder}" />
+                    </StackPanel>
+                </ControlTemplate>
+            </Setter>
+            <Style Selector="^:horizontal-collapsed:first-level">
+                <Setter Property="HorizontalAlignment" Value="Center"></Setter>
+                <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+                    <Setter Property="IsVisible" Value="False"></Setter>
+                </Style>
+                <Style Selector="^ /template/ Rectangle#PART_SeparatorBorder">
+                    <Setter Property="HorizontalAlignment" Value="Center"></Setter>
+                    <Setter Property="Width" Value="12"></Setter>
+                </Style>
+            </Style>
+        </Style>
+    </ControlTheme>
+
+</ResourceDictionary>

src/Ursa.Themes.Semi/Controls/_index.axaml

@@ -18,6 +18,7 @@
         <ResourceInclude Source="Loading.axaml" />
         <ResourceInclude Source="MessageBox.axaml" />
         <ResourceInclude Source="Navigation.axaml" />
+        <ResourceInclude Source="NavMenu.axaml" />
         <ResourceInclude Source="NumericUpDown.axaml" />
         <ResourceInclude Source="Pagination.axaml" />
         <ResourceInclude Source="RangeSlider.axaml" />

src/Ursa.Themes.Semi/Converters/NavMenuMarginConverter.cs

@@ -0,0 +1,17 @@
+using System.Globalization;
+using Avalonia;
+using Avalonia.Data.Converters;
+
+namespace Ursa.Themes.Semi.Converters;
+
+public class NavMenuMarginConverter: IMultiValueConverter
+{
+    public object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (values[0] is double indent && values[1] is int level && values[2] is bool b)
+        {
+            return b ? new Thickness() : new Thickness(indent * (level-1), 0, 0, 0);
+        }
+        return AvaloniaProperty.UnsetValue;
+    }
+}

src/Ursa/Controls/Icons/TwoTonePathIcon.cs

@@ -5,6 +5,7 @@ using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Primitives;
 using Avalonia.Data;
 using Avalonia.Media;
+using Irihi.Avalonia.Shared.Helpers;
 
 namespace Ursa.Controls;
 
@@ -75,13 +76,7 @@ public class TwoTonePathIcon: TemplatedControl
             ForegroundProperty,
             ActiveForegroundProperty,
             ActiveStrokeBrushProperty);
-        IsActiveProperty.Changed.AddClassHandler<TwoTonePathIcon, bool>((o, e) => o.OnIsActiveChanged(e));
+        PropertyToPseudoClassMixin.Attach<TwoTonePathIcon>(IsActiveProperty, PC_Active);
-    }
-
-    private void OnIsActiveChanged(AvaloniaPropertyChangedEventArgs<bool> args)
-    {
-        var newValue = args.NewValue.Value;
-        PseudoClasses.Set(PC_Active, newValue);
     }
 
     protected override void OnApplyTemplate(TemplateAppliedEventArgs e)

src/Ursa/Controls/NavMenu/NavMenu.cs

@@ -0,0 +1,276 @@
+using System.Diagnostics;
+using System.Reflection;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
+using Avalonia.Controls.Primitives;
+using Avalonia.Controls.Templates;
+using Avalonia.Data;
+using Avalonia.Input;
+using Avalonia.Interactivity;
+using Avalonia.LogicalTree;
+using Avalonia.Metadata;
+using Irihi.Avalonia.Shared.Helpers;
+
+namespace Ursa.Controls;
+
+[PseudoClasses(PC_HorizontalCollapsed)]
+public class NavMenu: ItemsControl
+{
+    public const string PC_HorizontalCollapsed = ":horizontal-collapsed";
+    
+    public static readonly StyledProperty<object?> SelectedItemProperty = AvaloniaProperty.Register<NavMenu, object?>(
+        nameof(SelectedItem), defaultBindingMode: BindingMode.TwoWay);
+
+    public object? SelectedItem
+    {
+        get => GetValue(SelectedItemProperty);
+        set => SetValue(SelectedItemProperty, value);
+    }
+
+    public static readonly StyledProperty<IBinding?> IconBindingProperty = AvaloniaProperty.Register<NavMenu, IBinding?>(
+        nameof(IconBinding));
+
+    [AssignBinding]
+    [InheritDataTypeFromItems(nameof(ItemsSource))]
+    public IBinding? IconBinding
+    {
+        get => GetValue(IconBindingProperty);
+        set => SetValue(IconBindingProperty, value);
+    }
+
+    public static readonly StyledProperty<IBinding?> HeaderBindingProperty = AvaloniaProperty.Register<NavMenu, IBinding?>(
+        nameof(HeaderBinding));
+
+    [AssignBinding]
+    [InheritDataTypeFromItems(nameof(ItemsSource))]
+    public IBinding? HeaderBinding
+    {
+        get => GetValue(HeaderBindingProperty);
+        set => SetValue(HeaderBindingProperty, value);
+    }
+
+    public static readonly StyledProperty<IBinding?> SubMenuBindingProperty = AvaloniaProperty.Register<NavMenu, IBinding?>(
+        nameof(SubMenuBinding));
+
+    [AssignBinding]
+    [InheritDataTypeFromItems(nameof(ItemsSource))]
+    public IBinding? SubMenuBinding
+    {
+        get => GetValue(SubMenuBindingProperty);
+        set => SetValue(SubMenuBindingProperty, value);
+    }
+
+    public static readonly StyledProperty<IBinding?> CommandBindingProperty = AvaloniaProperty.Register<NavMenu, IBinding?>(
+        nameof(CommandBinding));
+
+    [AssignBinding]
+    [InheritDataTypeFromItems(nameof(ItemsSource))]
+    public IBinding? CommandBinding
+    {
+        get => GetValue(CommandBindingProperty);
+        set => SetValue(CommandBindingProperty, value);
+    }
+
+    public static readonly StyledProperty<IDataTemplate?> HeaderTemplateProperty = AvaloniaProperty.Register<NavMenu, IDataTemplate?>(
+        nameof(HeaderTemplate));
+
+    /// <summary>
+    /// Header Template is used for MenuItem headers, not menu header. 
+    /// </summary>
+    public IDataTemplate? HeaderTemplate
+    {
+        get => GetValue(HeaderTemplateProperty);
+        set => SetValue(HeaderTemplateProperty, value);
+    }
+
+    public static readonly StyledProperty<IDataTemplate?> IconTemplateProperty = AvaloniaProperty.Register<NavMenu, IDataTemplate?>(
+        nameof(IconTemplate));
+
+    public IDataTemplate? IconTemplate
+    {
+        get => GetValue(IconTemplateProperty);
+        set => SetValue(IconTemplateProperty, value);
+    }
+
+    public static readonly StyledProperty<double> SubMenuIndentProperty = AvaloniaProperty.Register<NavMenu, double>(
+        nameof(SubMenuIndent));
+
+    public double SubMenuIndent
+    {
+        get => GetValue(SubMenuIndentProperty);
+        set => SetValue(SubMenuIndentProperty, value);
+    }
+
+    public static readonly StyledProperty<bool> IsHorizontalCollapsedProperty = AvaloniaProperty.Register<NavMenu, bool>(
+        nameof(IsHorizontalCollapsed));
+
+    public bool IsHorizontalCollapsed
+    {
+        get => GetValue(IsHorizontalCollapsedProperty);
+        set => SetValue(IsHorizontalCollapsedProperty, value);
+    }
+
+    public static readonly StyledProperty<object?> HeaderProperty =
+        HeaderedContentControl.HeaderProperty.AddOwner<NavMenu>();
+
+    public object? Header
+    {
+        get => GetValue(HeaderProperty);
+        set => SetValue(HeaderProperty, value);
+    }
+
+    public static readonly StyledProperty<object?> FooterProperty = AvaloniaProperty.Register<NavMenu, object?>(
+        nameof(Footer));
+
+    public object? Footer
+    {
+        get => GetValue(FooterProperty);
+        set => SetValue(FooterProperty, value);
+    }
+
+    public static readonly AttachedProperty<bool> CanToggleProperty =
+        AvaloniaProperty.RegisterAttached<NavMenu, InputElement, bool>("CanToggle");
+
+    public static void SetCanToggle(InputElement obj, bool value) => obj.SetValue(CanToggleProperty, value);
+    public static bool GetCanToggle(InputElement obj) => obj.GetValue(CanToggleProperty);
+    
+    public static readonly RoutedEvent<SelectionChangedEventArgs> SelectionChangedEvent = RoutedEvent.Register<NavMenu, SelectionChangedEventArgs>(nameof(SelectionChanged), RoutingStrategies.Bubble);
+    
+    public event EventHandler<SelectionChangedEventArgs>? SelectionChanged
+    {
+        add => AddHandler(SelectionChangedEvent, value);
+        remove => RemoveHandler(SelectionChangedEvent, value);
+    }
+    
+    static NavMenu()
+    {
+        SelectedItemProperty.Changed.AddClassHandler<NavMenu, object?>((o, e) => o.OnSelectedItemChange(e));
+        PropertyToPseudoClassMixin.Attach<NavMenu>(IsHorizontalCollapsedProperty, PC_HorizontalCollapsed);
+        CanToggleProperty.Changed.AddClassHandler<InputElement, bool>(OnInputRegisteredAsToggle);
+    }
+
+    private static void OnInputRegisteredAsToggle(InputElement input, AvaloniaPropertyChangedEventArgs<bool> e)
+    {
+        if (e.NewValue.Value)
+        {
+            input.AddHandler(PointerPressedEvent, OnElementToggle);
+        }
+        else
+        {
+            input.RemoveHandler(PointerPressedEvent, OnElementToggle);
+        }
+    }
+
+    private static void OnElementToggle(object? sender, RoutedEventArgs args)
+    {
+        if (sender is not InputElement input) return;
+        var nav = input.FindLogicalAncestorOfType<NavMenu>();
+        if(nav is null) return;
+        bool collapsed = nav.IsHorizontalCollapsed;
+        nav.IsHorizontalCollapsed = !collapsed;
+    }
+
+    /// <summary>
+    /// this implementation only works in the case that only leaf menu item is allowed to select. It will be changed if we introduce parent level selection in the future. 
+    /// </summary>
+    /// <param name="args"></param>
+    private void OnSelectedItemChange(AvaloniaPropertyChangedEventArgs<object?> args)
+    {
+        SelectionChangedEventArgs a = new SelectionChangedEventArgs(
+            SelectionChangedEvent,
+            new [] { args.OldValue.Value },
+            new [] { args.NewValue.Value });
+        if (_updateFromUI)
+        {
+            RaiseEvent(a);
+            return;
+        }
+        var newValue = args.NewValue.Value;
+        if (newValue is null)
+        {
+            ClearAll();
+            RaiseEvent(a);
+            return;
+        }
+        var leaves = GetLeafMenus();
+        bool found = false;
+        foreach (var leaf in leaves)
+        {
+            if (leaf == newValue || leaf.DataContext == newValue)
+            {
+                leaf.SelectItem(leaf);
+                found = true;
+            }
+        }
+        if (!found)
+        {
+            ClearAll();
+        }
+        RaiseEvent(a);
+    }
+
+    protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
+    {
+        return NeedsContainer<NavMenuItem>(item, out recycleKey);
+    }
+
+    protected override Control CreateContainerForItemOverride(object? item, int index, object? recycleKey)
+    {
+        return new NavMenuItem();
+    }
+
+    private bool _updateFromUI;
+
+    internal void SelectItem(NavMenuItem item, NavMenuItem parent)
+    {
+        _updateFromUI = true;
+        foreach (var child in LogicalChildren)
+        {
+            if (child == parent)
+            {
+                continue;
+            }
+            if (child is NavMenuItem navMenuItem)
+            {
+                navMenuItem.ClearSelection();
+            }
+        }
+        if (item.DataContext is not null && item.DataContext != this.DataContext)
+        {
+            SelectedItem = item.DataContext;
+        }
+        else
+        {
+            SelectedItem = item;
+        }
+        item.BringIntoView();
+        _updateFromUI = false;
+    }
+
+    private IEnumerable<NavMenuItem> GetLeafMenus()
+    {
+        foreach (var child in LogicalChildren)   
+        {
+            if (child is NavMenuItem item)
+            {
+                var leafs = item.GetLeafMenus();
+                foreach (var leaf in leafs)
+                {
+                    yield return leaf;
+                }
+            }
+        }
+    }
+
+    private void ClearAll()
+    {
+        foreach (var child in LogicalChildren)   
+        {
+            if (child is NavMenuItem item)
+            {
+                item.ClearSelection();
+            }
+        }
+    }
+}

src/Ursa/Controls/NavMenu/NavMenuItem.cs

@@ -0,0 +1,352 @@
+using System.Windows.Input;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
+using Avalonia.Controls.Mixins;
+using Avalonia.Controls.Primitives;
+using Avalonia.Controls.Templates;
+using Avalonia.Data;
+using Avalonia.Input;
+using Avalonia.Interactivity;
+using Avalonia.LogicalTree;
+using Avalonia.VisualTree;
+using Irihi.Avalonia.Shared.Helpers;
+
+namespace Ursa.Controls;
+
+/// <summary>
+/// Navigation Menu Item
+/// </summary>
+[PseudoClasses(PC_Highlighted, PC_HorizontalCollapsed, PC_VerticalCollapsed, PC_FirstLevel, PC_Selector)]
+public class NavMenuItem: HeaderedItemsControl
+{
+    public const string PC_Highlighted = ":highlighted";
+    public const string PC_FirstLevel = ":first-level";
+    public const string PC_HorizontalCollapsed = ":horizontal-collapsed";
+    public const string PC_VerticalCollapsed = ":vertical-collapsed";
+    public const string PC_Selector = ":selector";
+    
+    private NavMenu? _rootMenu;
+    private Panel? _popupPanel;
+    private Popup? _popup;
+    private Panel? _overflowPanel;
+    
+    public static readonly StyledProperty<object?> IconProperty = AvaloniaProperty.Register<NavMenuItem, object?>(
+        nameof(Icon));
+
+    public object? Icon
+    {
+        get => GetValue(IconProperty);
+        set => SetValue(IconProperty, value);
+    }
+
+    public static readonly StyledProperty<IDataTemplate?> IconTemplateProperty = AvaloniaProperty.Register<NavMenuItem, IDataTemplate?>(
+        nameof(IconTemplate));
+
+    public IDataTemplate? IconTemplate
+    {
+        get => GetValue(IconTemplateProperty);
+        set => SetValue(IconTemplateProperty, value);
+    }
+
+    public static readonly StyledProperty<ICommand?> CommandProperty = Button.CommandProperty.AddOwner<NavMenuItem>();
+
+    public ICommand? Command
+    {
+        get => GetValue(CommandProperty);
+        set => SetValue(CommandProperty, value);
+    }
+
+    public static readonly StyledProperty<object?> CommandParameterProperty =
+        Button.CommandParameterProperty.AddOwner<NavMenuItem>();
+
+    public object? CommandParameter
+    {
+        get => GetValue(CommandParameterProperty);
+        set => SetValue(CommandParameterProperty, value);
+    }
+
+    public static readonly StyledProperty<bool> IsSelectedProperty =
+        SelectingItemsControl.IsSelectedProperty.AddOwner<NavMenuItem>();
+
+    public bool IsSelected
+    {
+        get => GetValue(IsSelectedProperty);
+        set => SetValue(IsSelectedProperty, value);
+    }
+    
+    public static readonly RoutedEvent<RoutedEventArgs> IsSelectedChangedEvent = RoutedEvent.Register<SelectingItemsControl, RoutedEventArgs>("IsSelectedChanged", RoutingStrategies.Bubble);
+
+    private bool _isHighlighted;
+
+    public static readonly DirectProperty<NavMenuItem, bool> IsHighlightedProperty =
+        AvaloniaProperty.RegisterDirect<NavMenuItem, bool>(
+            nameof(IsHighlighted), o => o.IsHighlighted, (o, v) => o.IsHighlighted = v,
+            defaultBindingMode: BindingMode.TwoWay);
+
+    public bool IsHighlighted
+    {
+        get => _isHighlighted;
+        private set => SetAndRaise(IsHighlightedProperty, ref _isHighlighted, value);
+    }
+
+    public static readonly StyledProperty<bool> IsHorizontalCollapsedProperty =
+        NavMenu.IsHorizontalCollapsedProperty.AddOwner<NavMenuItem>();
+
+    public bool IsHorizontalCollapsed
+    {
+        get => GetValue(IsHorizontalCollapsedProperty);
+        set => SetValue(IsHorizontalCollapsedProperty, value);
+    }
+
+    public static readonly StyledProperty<bool> IsVerticalCollapsedProperty = AvaloniaProperty.Register<NavMenuItem, bool>(
+        nameof(IsVerticalCollapsed));
+
+    public bool IsVerticalCollapsed
+    {
+        get => GetValue(IsVerticalCollapsedProperty);
+        set => SetValue(IsVerticalCollapsedProperty, value);
+    }
+
+    public static readonly StyledProperty<double> SubMenuIndentProperty =
+        NavMenu.SubMenuIndentProperty.AddOwner<NavMenuItem>();
+
+    public double SubMenuIndent
+    {
+        get => GetValue(SubMenuIndentProperty);
+        set => SetValue(SubMenuIndentProperty, value);
+    }
+
+    internal static readonly DirectProperty<NavMenuItem, int> LevelProperty = AvaloniaProperty.RegisterDirect<NavMenuItem, int>(
+        nameof(Level), o => o.Level, (o, v) => o.Level = v);
+    private int _level;
+    internal int Level
+    {
+        get => _level;
+        set => SetAndRaise(LevelProperty, ref _level, value);
+    }
+
+    public static readonly StyledProperty<bool> IsSeparatorProperty = AvaloniaProperty.Register<NavMenuItem, bool>(
+        nameof(IsSeparator));
+
+    public bool IsSeparator
+    {
+        get => GetValue(IsSeparatorProperty);
+        set => SetValue(IsSeparatorProperty, value);
+    }
+
+    static NavMenuItem()
+    {
+        // SelectableMixin.Attach<NavMenuItem>(IsSelectedProperty);
+        PressedMixin.Attach<NavMenuItem>();
+        LevelProperty.Changed.AddClassHandler<NavMenuItem, int>((item, args) => item.OnLevelChange(args));
+        PropertyToPseudoClassMixin.Attach<NavMenuItem>(IsHighlightedProperty, PC_Highlighted);
+        PropertyToPseudoClassMixin.Attach<NavMenuItem>(IsHorizontalCollapsedProperty, PC_HorizontalCollapsed);
+        PropertyToPseudoClassMixin.Attach<NavMenuItem>(IsVerticalCollapsedProperty, PC_VerticalCollapsed);
+        PropertyToPseudoClassMixin.Attach<NavMenuItem>(IsSelectedProperty, ":selected", IsSelectedChangedEvent);
+        IsHorizontalCollapsedProperty.Changed.AddClassHandler<NavMenuItem, bool>((item, args) =>
+            item.OnIsHorizontalCollapsedChanged(args));
+    }
+
+    private void OnIsHorizontalCollapsedChanged(AvaloniaPropertyChangedEventArgs<bool> args)
+    {
+        if (args.NewValue.Value)
+        {
+            if (this.ItemsPanelRoot is OverflowStackPanel s)
+            {
+                s.MoveChildrenToOverflowPanel();
+            }
+        }
+        else
+        {
+            if (this.ItemsPanelRoot is OverflowStackPanel s)
+            {
+                s.MoveChildrenToMainPanel();
+            }
+        }
+    }
+
+    private void OnLevelChange(AvaloniaPropertyChangedEventArgs<int> args)
+    {
+        PseudoClasses.Set(PC_FirstLevel, args.NewValue.Value == 1);
+    }
+
+    protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
+    {
+        return NeedsContainer<NavMenuItem>(item, out recycleKey);
+    }
+
+    protected override Control CreateContainerForItemOverride(object? item, int index, object? recycleKey)
+    {
+        return new NavMenuItem();
+    }
+    
+    protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
+    {
+        base.OnAttachedToVisualTree(e);
+        _rootMenu = GetRootMenu();
+    }
+
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        base.OnApplyTemplate(e);
+        SetCurrentValue(LevelProperty,CalculateDistanceFromLogicalParent<NavMenu>(this));
+        _popup = e.NameScope.Find<Popup>("PART_Popup");
+        _overflowPanel = e.NameScope.Find<Panel>("PART_OverflowPanel");
+        if (_rootMenu is not null)
+        {
+            if (_rootMenu.IconBinding is not null)
+            {
+                this[!IconProperty] = _rootMenu.IconBinding;
+            }
+            if (_rootMenu.HeaderBinding is not null)
+            {
+                this[!HeaderProperty] = _rootMenu.HeaderBinding;
+            }
+            if (_rootMenu.SubMenuBinding is not null)
+            {
+                this[!ItemsSourceProperty] = _rootMenu.SubMenuBinding;
+            }
+            if (_rootMenu.CommandBinding is not null)
+            {
+                this[!CommandProperty] = _rootMenu.CommandBinding;
+            }
+            this[!IconTemplateProperty] = _rootMenu[!NavMenu.IconTemplateProperty];
+            this[!HeaderTemplateProperty] = _rootMenu[!NavMenu.HeaderTemplateProperty];
+            this[!SubMenuIndentProperty] = _rootMenu[!NavMenu.SubMenuIndentProperty];
+            this[!IsHorizontalCollapsedProperty] = _rootMenu[!NavMenu.IsHorizontalCollapsedProperty];
+        }
+    }
+
+    protected override void OnLoaded(RoutedEventArgs e)
+    {
+        base.OnLoaded(e);
+        var root = this.ItemsPanelRoot;
+        if (root is OverflowStackPanel stack)
+        {
+            stack.OverflowPanel = _overflowPanel;
+        }
+    }
+
+    protected override void OnPointerPressed(PointerPressedEventArgs e)
+    {
+        if (IsSeparator)
+        {
+            e.Handled = true;
+            return;
+        }
+        base.OnPointerPressed(e);
+        if (this.ItemCount == 0)
+        {
+            SelectItem(this);
+        }
+        else
+        {
+            if (!IsHorizontalCollapsed) 
+            {
+                SetCurrentValue(IsVerticalCollapsedProperty, !IsVerticalCollapsed);
+            }
+            else
+            {
+                if (_popup is not null)
+                {
+                    if (_popup.IsOpen)
+                    {
+                        _popup.Close();
+                    }
+                    else
+                    {
+                        _popup.Open();
+                    }
+                }
+            }
+        }
+        Command?.Execute(CommandParameter);
+        e.Handled = true;
+    }
+    
+    internal void SelectItem(NavMenuItem item)
+    {
+        if (item == this)
+        {
+            SetCurrentValue(IsSelectedProperty, true);
+            SetCurrentValue(IsHighlightedProperty, true);
+        }
+        else
+        {
+            SetCurrentValue(IsSelectedProperty, false);
+            SetCurrentValue(IsHighlightedProperty, true);
+        }
+        if (this.Parent is NavMenuItem menuItem)
+        {
+            menuItem.SelectItem(item);
+            var items = menuItem.LogicalChildren.OfType<NavMenuItem>();
+            foreach (var child in items)
+            {
+                if (child != this)
+                {
+                    child.ClearSelection();
+                }
+            }
+        }
+        else if (this.Parent is NavMenu menu)
+        {
+            menu.SelectItem(item, this);
+        }
+    }
+
+    internal void ClearSelection()
+    {
+        SetCurrentValue(IsHighlightedProperty, false);
+        SetCurrentValue(IsSelectedProperty, false);
+        foreach (var child in LogicalChildren)
+        {
+            if (child is NavMenuItem item)
+            {
+                item.ClearSelection();
+            }
+        }
+    }
+
+    private NavMenu? GetRootMenu()
+    {
+        var root = this.FindAncestorOfType<NavMenu>() ?? this.FindLogicalAncestorOfType<NavMenu>();
+        return root;
+    }
+    
+    private static int CalculateDistanceFromLogicalParent<T>(ILogical? logical, int @default = -1) where T : class
+    {
+        var result = 0;
+
+        while (logical != null && !(logical is T))
+        {
+            if (logical is NavMenuItem)
+            {
+                result++;
+            }
+            logical = logical.LogicalParent;
+        }
+
+        return logical != null ? result : @default;
+    }
+    
+    internal IEnumerable<NavMenuItem> GetLeafMenus()
+    {
+        if (this.ItemCount == 0)
+        {
+            yield return this;
+            yield break;
+        }
+        foreach (var child in LogicalChildren)   
+        {
+            if (child is NavMenuItem item)
+            {
+                var items = item.GetLeafMenus();
+                foreach (var i in items)
+                {
+                    yield return i;
+                }
+            }
+        }
+    }
+}

src/Ursa/Controls/NavMenu/OverflowStackPanel.cs

@@ -0,0 +1,30 @@
+using Avalonia.Controls;
+
+namespace Ursa.Controls;
+
+public class OverflowStackPanel: StackPanel
+{
+    public Panel? OverflowPanel { get; set; }
+    public void MoveChildrenToOverflowPanel()
+    {
+        var children = this.Children.ToList();
+        foreach (var child in children)
+        {
+            Children.Remove(child);
+            OverflowPanel?.Children.Add(child);
+        }
+    }
+    
+    public void MoveChildrenToMainPanel()
+    {
+        var children = this.OverflowPanel?.Children.ToList();
+        if (children != null && children.Count > 0)
+        {
+            foreach (var child in children)
+            {
+                OverflowPanel?.Children.Remove(child);
+                Children.Add(child);
+            }
+        }
+    }
+}

src/Ursa/Ursa.csproj

@@ -14,7 +14,7 @@
 
     <ItemGroup>
         <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Irihi.Avalonia.Shared" Version="0.1.1" />
+        <PackageReference Include="Irihi.Avalonia.Shared" Version="0.1.2" />
     </ItemGroup>
 
 </Project>