feat: update to finish functionality, start to build theme.

demo/Ursa.Demo/Converters/IconNameConverter.cs

@@ -0,0 +1,32 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using System.Linq;
+using Avalonia;
+using Avalonia.Controls.Shapes;
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+using Avalonia.Metadata;
+
+namespace Ursa.Demo.Converters;
+
+public class IconNameConverter: IValueConverter
+{
+    [Content]
+    public Dictionary<string, PathGeometry> Paths { get; set; } = new();
+
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is null) return null;
+        if (value is string s)
+        {
+            return Paths.TryGetValue(s, out var path)? path: AvaloniaProperty.UnsetValue;
+        }
+        return AvaloniaProperty.UnsetValue;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}

demo/Ursa.Demo/Pages/NavigationMenuDemo.axaml

@@ -2,6 +2,7 @@
     x:Class="Ursa.Demo.Pages.NavigationMenuDemo"
     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"
@@ -11,12 +12,38 @@
     x:CompileBindings="True"
     x:DataType="vm:NavigationMenuDemoViewModel"
     mc:Ignorable="d">
-    <StackPanel>
-        <u:NavigationMenu Name="menu" ItemsSource="{Binding MenuItems}">
+    <UserControl.Resources>
+        <converters:IconNameConverter x:Key="IconNameConverter">
+            <PathGeometry x:Key="User">M12 16C13.9818 16 15.7453 14.3394 16.7142 11.8589C17.3163 11.6122 17.8892 10.8644 18.1508 9.88823C18.4909 8.61881 18.4234 7.48536 17.4964 7.13266C17.4064 2.7111 15.6617 1 12 1C8.33858 1 6.59387 2.71088 6.50372 7.13179C5.57454 7.48354 5.50668 8.61777 5.84709 9.8882C6.10904 10.8658 6.68318 11.6143 7.28626 11.8599C8.2552 14.3398 10.0186 16 12 16Z M19.6049 22C20.8385 22 21.7171 20.8487 20.867 19.9547C19.1971 18.1985 15.853 17 12 17C8.14699 17 4.80292 18.1985 3.133 19.9547C2.2829 20.8487 3.16148 22 4.39513 22H19.6049Z</PathGeometry>
+            <PathGeometry x:Key="Star">M10.7525 1.90411C11.1451 0.698628 12.8549 0.698631 13.2475 1.90411L15.2395 8.01946H21.6858C22.9565 8.01946 23.4848 9.64143 22.4568 10.3865L17.2417 14.1659L19.2337 20.2813C19.6263 21.4868 18.2431 22.4892 17.2151 21.7442L12 17.9647L6.78489 21.7442C5.75687 22.4892 4.37368 21.4868 4.76635 20.2813L6.75834 14.1659L1.54323 10.3865C0.515206 9.64142 1.04354 8.01946 2.31425 8.01946H8.76048L10.7525 1.90411Z</PathGeometry>
+            <PathGeometry x:Key="Gear">M7.99973 5.07197C7.19713 5.53535 6.20729 5.53113 5.40866 5.06092L5.1637 4.91669C4.55751 4.55978 3.77662 4.65563 3.34264 5.20927C2.69567 6.03462 2.17585 6.94251 1.79166 7.90124C1.53027 8.55354 1.83733 9.27693 2.449 9.62286L2.69407 9.76145C3.50107 10.2178 4.00002 11.0732 4.00002 12.0003C4.00002 12.9271 3.50145 13.7822 2.69492 14.2387L2.44842 14.3783C1.83596 14.725 1.52888 15.4497 1.79213 16.1024C1.98358 16.577 2.21048 17.044 2.47374 17.5C2.73723 17.9564 3.0285 18.3868 3.34416 18.7902C3.77773 19.3443 4.5588 19.4406 5.16498 19.0834L5.40839 18.9399C6.20714 18.4692 7.19739 18.4648 8.0003 18.9284C8.80291 19.3918 9.29417 20.2511 9.28627 21.1778L9.28386 21.4601C9.27787 22.1629 9.75107 22.7906 10.4468 22.8903C11.4692 23.0368 12.5154 23.0404 13.5537 22.8927C14.2499 22.7936 14.7231 22.1653 14.7169 21.462L14.7143 21.1785C14.7061 20.2514 15.1974 19.3916 16.0003 18.928C16.8029 18.4647 17.7927 18.4689 18.5914 18.9391L18.8363 19.0833C19.4425 19.4402 20.2234 19.3444 20.6574 18.7907C21.3044 17.9654 21.8242 17.0575 22.2084 16.0988C22.4698 15.4465 22.1627 14.7231 21.551 14.3772L21.306 14.2386C20.499 13.7822 20 12.9268 20 11.9997C20 11.0729 20.4986 10.2178 21.3051 9.76126L21.5516 9.62174C22.1641 9.27506 22.4712 8.55029 22.2079 7.89761C22.0165 7.42297 21.7896 6.95598 21.5263 6.50001C21.2628 6.04362 20.9715 5.61325 20.6559 5.20982C20.2223 4.65568 19.4412 4.55944 18.8351 4.91665L18.5916 5.06009C17.7929 5.53078 16.8026 5.53519 15.9997 5.07163C15.1971 4.60825 14.7059 3.74891 14.7138 2.82218L14.7162 2.53994C14.7222 1.83708 14.249 1.20945 13.5532 1.10973C12.5308 0.963214 11.4846 0.959581 10.4464 1.10733C9.75011 1.20641 9.27691 1.83473 9.28317 2.53798L9.28569 2.82154C9.29395 3.74862 8.80264 4.60841 7.99973 5.07197ZM14 15.4641C15.9132 14.3595 16.5687 11.9132 15.4641 9.99999C14.3595 8.08682 11.9132 7.43132 10 8.53589C8.08684 9.64046 7.43134 12.0868 8.53591 14C9.64048 15.9132 12.0868 16.5687 14 15.4641Z</PathGeometry>
+
+        </converters:IconNameConverter>
+    </UserControl.Resources>
+    <StackPanel Orientation="Horizontal">
+        <u:NavigationMenu
+            Name="menu"
+            HorizontalAlignment="Left"
+            Header="Semi Avalonia"
+            ItemsSource="{Binding MenuItems}"
+            ShowCollapseButton="True">
+            <u:NavigationMenu.Icon>
+                <PathIcon
+                    Width="32"
+                    Height="32"
+                    Data="M10.6201 17.5C6.06377 17.5 2.37012 13.8063 2.37012 9.25C2.37012 4.69365 6.06377 1 10.6201 1V17.5ZM13.3701 6.5C17.9265 6.5 21.6201 10.1936 21.6201 14.75C21.6201 19.3063 17.9265 23 13.3701 23V6.5Z" />
+            </u:NavigationMenu.Icon>
             <u:NavigationMenu.ItemTemplate>
-                <DataTemplate>
-                    <u:NavigationMenuItem Header="{Binding MenuHeader}" ItemsSource="{Binding Children}" />
-                </DataTemplate>
+                <TreeDataTemplate>
+                    <u:NavigationMenuItem Header="{Binding MenuHeader}" ItemsSource="{Binding Children}">
+                        <u:NavigationMenuItem.Icon>
+                            <PathIcon
+                                Width="16"
+                                Height="16"
+                                Data="{Binding MenuIconName, Converter={StaticResource IconNameConverter}}" />
+                        </u:NavigationMenuItem.Icon>
+                    </u:NavigationMenuItem>
+                </TreeDataTemplate>
             </u:NavigationMenu.ItemTemplate>
         </u:NavigationMenu>
 
@@ -28,7 +55,7 @@
             </TreeView.ItemTemplate>
         </TreeView>
 
-        <TextBlock Text="{ReflectionBinding #menu.SelectedMenuItem.MenuHeader}" />
+        <TextBlock Text="{ReflectionBinding #menu.SelectedItem.MenuHeader}" />
 
         <u:NavigationMenu>
             <u:NavigationMenuItem Header="111" />

demo/Ursa.Demo/ViewModels/NavigationMenuDemoViewModel.cs

@@ -9,26 +9,29 @@ public class NavigationMenuDemoViewModel: ObservableObject
     {
         new NavigationMenuItemViewModel()
         {
-            MenuHeader = "1",
+            MenuHeader = "任务管理",
+            MenuIconName = "User",
             Children = new ObservableCollection<NavigationMenuItemViewModel>()
             {
-                new NavigationMenuItemViewModel(){
-                    MenuHeader = "11" , 
+                new (){
+                    MenuHeader = "公告管理" , 
+                    MenuIconName = "Star",
                     Children = new ObservableCollection<NavigationMenuItemViewModel>()
                     {
-                        new NavigationMenuItemViewModel(){MenuHeader = "111"},
-                        new NavigationMenuItemViewModel(){MenuHeader = "112"}
+                        new () {MenuHeader = "公告设置"},
+                        new () {MenuHeader = "公告处理"}
                     }},
-                new NavigationMenuItemViewModel(){MenuHeader = "12"}
+                new (){MenuHeader = "任务查询"}
             }
         },
         new NavigationMenuItemViewModel()
         {
-            MenuHeader = "2",
+            MenuHeader = "任务平台",
+            MenuIconName = "Gear",
             Children = new ObservableCollection<NavigationMenuItemViewModel>()
             {
-                new NavigationMenuItemViewModel(){MenuHeader = "21"},
-                new NavigationMenuItemViewModel(){MenuHeader = "22"}
+                new (){MenuHeader = "任务管理"},
+                new (){MenuHeader = "用户任务查询"}
             }
         }
     };
@@ -37,5 +40,6 @@ public class NavigationMenuDemoViewModel: ObservableObject
 public class NavigationMenuItemViewModel: ObservableObject
 {
     public string MenuHeader { get; set; }
+    public string MenuIconName { get; set; }
     public ObservableCollection<NavigationMenuItemViewModel> Children { get; set; } = new();
 }

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

@@ -1,42 +1,171 @@
 <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:NavigationMenuItemLevelToMarginConverter x:Key="MarginConverter" Indent="8" />
+
     <ControlTheme x:Key="{x:Type u:NavigationMenu}" TargetType="u:NavigationMenu">
+        <Setter Property="VerticalAlignment" Value="Stretch" />
         <Setter Property="Template">
             <ControlTemplate TargetType="u:NavigationMenu">
-                <Border Background="{TemplateBinding Background}">
-                    <StackPanel>
-                        <ContentPresenter Name="PART_HeaderPresenter" Content="Hello" />
-                        <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
-                    </StackPanel>
+                <Border
+                    Name="PART_RootBorder"
+                    Width="260"
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Border.Transitions>
+                        <Transitions>
+                            <DoubleTransition Property="Width" Duration="0:0:0.2" />
+                        </Transitions>
+                    </Border.Transitions>
+                    <Grid
+                        Name="PART_RootGrid"
+                        HorizontalAlignment="Stretch"
+                        Background="{TemplateBinding Background}"
+                        RowDefinitions="Auto, *, Auto, Auto">
+                        <StackPanel
+                            Margin="18"
+                            HorizontalAlignment="Center"
+                            Orientation="Horizontal">
+                            <ContentPresenter
+                                Name="PART_IconPresenter"
+                                Margin="0,8"
+                                VerticalAlignment="Center"
+                                Content="{TemplateBinding Icon}" />
+                            <ContentPresenter
+                                Name="PART_HeaderPresenter"
+                                VerticalAlignment="Center"
+                                Content="{TemplateBinding Header}"
+                                ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                FontSize="18" />
+
+                        </StackPanel>
+                        <ItemsPresenter Grid.Row="1" ItemsPanel="{TemplateBinding ItemsPanel}" />
+                        <ContentPresenter
+                            Name="PART_FooterPresenter"
+                            Grid.Row="2"
+                            Content="{TemplateBinding Footer}"
+                            ContentTemplate="{TemplateBinding FooterTemplate}" />
+                        <ToggleButton
+                            Name="{x:Static u:NavigationMenu.PART_CloseButton}"
+                            Grid.Row="3"
+                            Content="Open"
+                            IsChecked="{TemplateBinding IsClosed,
+                                                        Mode=TwoWay}"
+                            IsVisible="{TemplateBinding ShowCollapseButton}" />
+                    </Grid>
                 </Border>
             </ControlTemplate>
         </Setter>
+        <Style Selector="^:closed">
+            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="ContentPresenter.IsVisible" Value="False" />
+            </Style>
+            <Style Selector="^ /template/ Border#PART_RootBorder">
+                <Setter Property="Border.Width" Value="60" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="Grid.HorizontalAlignment" Value="Center" />
+            </Style>
+        </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type u:NavigationMenuItem}" TargetType="u:NavigationMenuItem">
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="Template">
             <ControlTemplate TargetType="u:NavigationMenuItem">
-                <Border
-                    Padding="4"
-                    BorderBrush="Black"
-                    BorderThickness="1">
+                <Border>
                     <StackPanel>
-                        <ContentPresenter
-                            Name="PART_HeaderPresenter"
-                            Background="{TemplateBinding Background}"
-                            Content="{TemplateBinding Header}"
-                            ContentTemplate="{TemplateBinding HeaderTemplate}" />
-                        <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
+                        <Border
+                            Name="PART_HeaderBorder"
+                            Margin="0,2"
+                            Padding="8"
+                            Background="Transparent"
+                            CornerRadius="6">
+                            <Grid
+                                Name="PART_RootStackPanel"
+                                HorizontalAlignment="Stretch"
+                                ColumnDefinitions="Auto, Auto, *, Auto">
+                                <ContentPresenter
+                                    Name="PART_IconPresenter"
+                                    Grid.Column="1"
+                                    MinWidth="32"
+                                    Margin="{TemplateBinding Level,
+                                                             Converter={StaticResource MarginConverter}}"
+                                    Content="{TemplateBinding Icon}"
+                                    ContentTemplate="{TemplateBinding IconTemplate}" />
+                                <ContentPresenter
+                                    Name="PART_HeaderPresenter"
+                                    Grid.Column="2"
+                                    VerticalAlignment="Center"
+                                    Background="{TemplateBinding Background}"
+                                    Content="{TemplateBinding Header}"
+                                    ContentTemplate="{TemplateBinding HeaderTemplate}">
+                                    <ContentPresenter.Transitions>
+                                        <Transitions>
+                                            <DoubleTransition Property="Opacity" Duration="0:0:0.15" />
+                                        </Transitions>
+                                    </ContentPresenter.Transitions>
+                                </ContentPresenter>
+                                <PathIcon
+                                    Name="PART_ExpandIcon"
+                                    Grid.Column="3"
+                                    Width="8"
+                                    Height="8"
+                                    Data="M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z">
+                                    <PathIcon.Transitions>
+                                        <Transitions>
+                                            <TransformOperationsTransition Property="RenderTransform" Duration="0.1" />
+                                        </Transitions>
+                                    </PathIcon.Transitions>
+                                </PathIcon>
+                            </Grid>
+                        </Border>
+                        <ItemsPresenter Name="PART_ItemsPresenter" ItemsPanel="{TemplateBinding ItemsPanel}">
+                            <ItemsPresenter.Transitions>
+                                <Transitions>
+                                    <DoubleTransition Property="Height" Duration="0:0:0.15" />
+                                    <DoubleTransition Property="Opacity" Duration="0:0:0.15" />
+                                </Transitions>
+                            </ItemsPresenter.Transitions>
+                        </ItemsPresenter>
                     </StackPanel>
                 </Border>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:selected">
-            <Setter Property="u:NavigationMenuItem.Background" Value="Red" />
+        <Style Selector="^ /template/ Border#PART_HeaderBorder:pointerover">
+            <Setter Property="Border.Background" Value="LightGray" />
+        </Style>
+        <Style Selector="^:highlighted /template/ ContentPresenter#PART_IconPresenter">
+            <Setter Property="u:NavigationMenuItem.Foreground" Value="Blue" />
+        </Style>
+        <Style Selector="^:selected /template/ Border#PART_HeaderBorder">
+            <Setter Property="u:NavigationMenuItem.Background" Value="LightBlue" />
+        </Style>
+        <Style Selector="^:closed /template/ ContentPresenter#PART_HeaderPresenter">
+            <Setter Property="ContentPresenter.Opacity" Value="0" />
+        </Style>
+        <Style Selector="^:closed /template/ StackPanel#PART_RootStackPanel">
+            <Setter Property="StackPanel.HorizontalAlignment" Value="Center" />
+        </Style>
+        <Style Selector="^:closed /template/ ItemsPresenter#PART_ItemsPresenter">
+            <Setter Property="ItemsPresenter.IsVisible" Value="False" />
+        </Style>
+        <Style Selector="^:collapsed /template/ ItemsPresenter#PART_ItemsPresenter">
+            <Setter Property="ItemsPresenter.Height" Value="0" />
+            <Setter Property="ItemsPresenter.Opacity" Value="0" />
+        </Style>
+        <Style Selector="^:not(:empty):collapsed /template/ PathIcon#PART_ExpandIcon">
+            <Setter Property="PathIcon.RenderTransform" Value="rotate(180deg)" />
+        </Style>
+        <Style Selector="^:empty /template/ PathIcon#PART_ExpandIcon">
+            <Setter Property="PathIcon.IsVisible" Value="False" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>

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

@@ -0,0 +1,23 @@
+using System.Globalization;
+using Avalonia;
+using Avalonia.Data.Converters;
+
+namespace Ursa.Themes.Semi.Converters;
+
+public class NavigationMenuItemLevelToMarginConverter: IValueConverter
+{
+    public int Indent { get; set; }
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is int i)
+        {
+            return new Thickness((i-1) * Indent, 0, 0, 0);
+        }
+        return new Thickness();
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}

src/Ursa/Controls/Navigation/NavigationMenu.cs

@@ -3,6 +3,7 @@ using System.Collections.Specialized;
 using Avalonia;
 using Avalonia.Collections;
 using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Primitives;
 using Avalonia.Controls.Templates;
@@ -12,8 +13,14 @@ using Avalonia.Metadata;
 
 namespace Ursa.Controls;
 
-public class NavigationMenu: HeaderedSelectingItemsControl
+[PseudoClasses(PC_Closed)]
+[TemplatePart(Name = PART_CloseButton, Type = typeof(ToggleButton))]
+
+public class NavigationMenu: HeaderedItemsControl
 {
+    public const string PC_Closed = ":closed";
+    public const string PART_CloseButton = "PART_CloseButton";
+    
     public static readonly StyledProperty<object?> FooterProperty = AvaloniaProperty.Register<NavigationMenu, object?>(
         nameof(Footer));
 
@@ -32,13 +39,82 @@ public class NavigationMenu: HeaderedSelectingItemsControl
         set => SetValue(FooterTemplateProperty, value);
     }
 
-    public static readonly StyledProperty<object?> SelectedMenuItemProperty = AvaloniaProperty.Register<NavigationMenu, object?>(
-        nameof(SelectedMenuItem));
+    public static readonly StyledProperty<object?> IconProperty = AvaloniaProperty.Register<NavigationMenu, object?>(
+        nameof(Icon));
 
-    public object? SelectedMenuItem
+    public object? Icon
     {
-        get => GetValue(SelectedMenuItemProperty);
-        set => SetValue(SelectedMenuItemProperty, value);
+        get => GetValue(IconProperty);
+        set => SetValue(IconProperty, value);
+    }
+    
+
+    public static readonly StyledProperty<object?> SelectedItemProperty = AvaloniaProperty.Register<NavigationMenu, object?>(
+        nameof(SelectedItem));
+
+    public object? SelectedItem
+    {
+        get => GetValue(SelectedItemProperty);
+        set => SetValue(SelectedItemProperty, value);
+    }
+
+    public static readonly StyledProperty<bool> ShowCollapseButtonProperty = AvaloniaProperty.Register<NavigationMenu, bool>(
+        nameof(ShowCollapseButton));
+
+    public bool ShowCollapseButton
+    {
+        get => GetValue(ShowCollapseButtonProperty);
+        set => SetValue(ShowCollapseButtonProperty, value);
+    }
+
+    public static readonly StyledProperty<bool> IsClosedProperty = AvaloniaProperty.Register<NavigationMenu, bool>(
+        nameof(IsClosed));
+
+    public bool IsClosed
+    {
+        get => GetValue(IsClosedProperty);
+        set => SetValue(IsClosedProperty, value);
+    }
+
+    public static readonly StyledProperty<double> OpenedWidthProperty = AvaloniaProperty.Register<NavigationMenu, double>(
+        nameof(OpenedWidth));
+
+    public double OpenedWidth
+    {
+        get => GetValue(OpenedWidthProperty);
+        set => SetValue(OpenedWidthProperty, value);
+    }
+
+    public static readonly StyledProperty<double> ClosedWidthProperty = AvaloniaProperty.Register<NavigationMenu, double>(
+        nameof(ClosedWidth));
+
+    public double ClosedWidth
+    {
+        get => GetValue(ClosedWidthProperty);
+        set => SetValue(ClosedWidthProperty, value);
+    }
+    
+    
+
+    static NavigationMenu()
+    {
+        SelectedItemProperty.Changed.AddClassHandler<NavigationMenu>((o, e) => o.OnSelectionItemChanged(e));
+        IsClosedProperty.Changed.AddClassHandler<NavigationMenu>((o,e)=>o.OnIsClosedChanged(e));
+    }
+
+    private void OnSelectionItemChanged(AvaloniaPropertyChangedEventArgs args)
+    {
+        var newItem = args.GetNewValue<object?>();
+        if (newItem is not null)
+        {
+            UpdateSelectionFromSelectedItem(newItem);
+        }
+    }
+
+    private void OnIsClosedChanged(AvaloniaPropertyChangedEventArgs args)
+    {
+        bool newValue = args.GetNewValue<bool>();
+        PseudoClasses.Set(PC_Closed, newValue);
     }
     
     internal void UpdateSelection(NavigationMenuItem source)
@@ -48,15 +124,7 @@ public class NavigationMenu: HeaderedSelectingItemsControl
         {
             foreach (var child in children)
             {
-                NavigationMenuItem? item = null;
-                if (child is NavigationMenuItem i)
-                {
-                    item = i;
-                }
-                else if (child is ContentPresenter { Child: NavigationMenuItem i2 })
-                {
-                    item = i2;
-                }
+                NavigationMenuItem? item =  NavigationMenuItem.GetMenuItemFromControl(child);
                 if (item != null)
                 {
                     if(Equals(item, source)) continue;
@@ -65,4 +133,18 @@ public class NavigationMenu: HeaderedSelectingItemsControl
             }
         }
     }
+
+    private void UpdateSelectionFromSelectedItem(object? o)
+    {
+        var children = this.ItemsPanelRoot?.Children;
+        if (children is not null)
+        {
+            foreach (var child in children)
+            {
+                NavigationMenuItem? item = NavigationMenuItem.GetMenuItemFromControl(child);
+                if(item is null) continue;
+                item.UpdateSelectionFromSelectedItem(o);
+            }
+        }
+    }
 }

src/Ursa/Controls/Navigation/NavigationMenuItem.cs

@@ -1,8 +1,10 @@
+using System.Security.Cryptography.X509Certificates;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Primitives;
+using Avalonia.Controls.Templates;
 using Avalonia.Data;
 using Avalonia.Input;
 using Avalonia.LogicalTree;
@@ -12,16 +14,68 @@ using Avalonia.VisualTree;
 
 namespace Ursa.Controls;
 
-[PseudoClasses(PC_Closed, PC_Selected, PC_Empty)]
+[PseudoClasses(PC_Closed, PC_Selected, PC_Highlighted, PC_Collapsed)]
 public class NavigationMenuItem: HeaderedSelectingItemsControl
 {
     public const string PC_Closed = ":closed";
     public const string PC_Selected = ":selected";
-    public const string PC_Empty = ":empty";
+    public const string PC_Highlighted= ":highlighted";
+    public const string PC_Collapsed = ":collapsed";
 
     private NavigationMenu? _rootMenu;
     private IDisposable? _ownerSubscription;
     private IDisposable? _itemsBinding;
+    private bool _isCollapsed;
+
+    public static readonly StyledProperty<bool> IsClosedProperty = AvaloniaProperty.Register<NavigationMenuItem, bool>(
+        nameof(IsClosed));
+
+    public bool IsClosed
+    {
+        get => GetValue(IsClosedProperty);
+        set => SetValue(IsClosedProperty, value);
+    }
+
+    public static readonly StyledProperty<object?> IconProperty = AvaloniaProperty.Register<NavigationMenuItem, object?>(
+        nameof(Icon));
+
+    public object? Icon
+    {
+        get => GetValue(IconProperty);
+        set => SetValue(IconProperty, value);
+    }
+
+    public static readonly StyledProperty<IDataTemplate> IconTemplateProperty = AvaloniaProperty.Register<NavigationMenuItem, IDataTemplate>(
+        nameof(IconTemplate));
+
+    public IDataTemplate IconTemplate
+    {
+        get => GetValue(IconTemplateProperty);
+        set => SetValue(IconTemplateProperty, value);
+    }
+
+    private int _level;
+
+    public static readonly DirectProperty<NavigationMenuItem, int> LevelProperty = AvaloniaProperty.RegisterDirect<NavigationMenuItem, int>(
+        nameof(Level), o => o.Level);
+
+    public int Level
+    {
+        get => _level;
+        private set => SetAndRaise(LevelProperty, ref _level, value);
+    }
+
+    static NavigationMenuItem()
+    {
+        IsClosedProperty.Changed.AddClassHandler<NavigationMenuItem>((o, e) => o.OnIsClosedChanged(e));
+    }
+
+    private void OnIsClosedChanged(AvaloniaPropertyChangedEventArgs args)
+    {
+        bool newValue = args.GetNewValue<bool>();
+        PseudoClasses.Set(PC_Closed, newValue);
+    }
+
 
     protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
     {
@@ -35,6 +89,11 @@ public class NavigationMenuItem: HeaderedSelectingItemsControl
         {
             SetCurrentValue(ItemContainerThemeProperty, _rootMenu.ItemContainerTheme);
         }
+
+        _rootMenu?.GetObservable(NavigationMenu.IsClosedProperty)
+            .Subscribe(new AnonymousObserver<bool>(a => this.IsClosed = a));
+        
+        Level = CalculateDistanceFromLogicalParent<NavigationMenu>(this) - 1;
     }
 
     protected override void OnPointerPressed(PointerPressedEventArgs e)
@@ -47,31 +106,38 @@ public class NavigationMenuItem: HeaderedSelectingItemsControl
             if (_rootMenu is not null && parents.Contains(_rootMenu))
             {
                 object? o = this.DataContext ?? this;
-                _rootMenu.SelectedMenuItem = o;
+                _rootMenu.SelectedItem = o;
             }
+            SetSelection(this, true, true);
+        }
+        // Non-leaf node, act as a toggle button.
+        else
+        {
+            _isCollapsed = !_isCollapsed;
+            this.PseudoClasses.Set(PC_Collapsed, _isCollapsed);
         }
-
         e.Handled = true;
-        SetSelection(this, true, true);
+        
     }
 
     internal void SetSelection(NavigationMenuItem? source, bool selected, bool propagateToParent = false)
     {
-        this.PseudoClasses.Set(PC_Selected, selected);
+        if (Equals(this, source) && this.ItemCount == 0)
+        {
+            this.PseudoClasses.Set(PC_Highlighted, selected);
+            this.PseudoClasses.Set(PC_Selected, selected);
+        }
+        else
+        {
+            this.PseudoClasses.Set(PC_Selected, false);
+            this.PseudoClasses.Set(PC_Highlighted, selected);
+        }
         var children = this.ItemsPanelRoot?.Children;
         if (children is not null)
         {
             foreach (var child in children)
             {
-                NavigationMenuItem? item = null;
-                if (child is NavigationMenuItem i)
-                {
-                    item = i;
-                }
-                else if (child is ContentPresenter { Child: NavigationMenuItem i2 })
-                {
-                    item = i2;
-                }
+                NavigationMenuItem? item = GetMenuItemFromControl(child);
                 if (item != null)
                 {
                     if(Equals(item, source)) continue;
@@ -96,4 +162,54 @@ public class NavigationMenuItem: HeaderedSelectingItemsControl
             }
         }
     }
+
+    internal void UpdateSelectionFromSelectedItem(object? o)
+    {
+        if (o is null)
+        {
+            this.SetSelection(this, false, false);
+            return;
+        }
+
+        if (Equals(this, o) || Equals(this.DataContext, o))
+        {
+            this.SetSelection(this, true, true);
+        }
+        else
+        {
+            var children = this.ItemsPanelRoot?.Children;
+            if (children is not null)
+            {
+                foreach (var child in children)
+                {
+                    NavigationMenuItem? item = GetMenuItemFromControl(child);
+                    if (item != null)
+                    {
+                        item.UpdateSelectionFromSelectedItem(o);
+                    }
+                }
+            }
+        }
+    }
+    
+    private static int CalculateDistanceFromLogicalParent<T>(ILogical? logical, int @default = -1) where T : class
+    {
+        var result = 0;
+
+        while (logical != null && !(logical is T))
+        {
+            ++result;
+            logical = logical.LogicalParent;
+        }
+
+        return logical != null ? result : @default;
+    }
+
+    public static NavigationMenuItem? GetMenuItemFromControl(Control? control)
+    {
+        if (control is null) return null;
+        if (control is NavigationMenuItem item) return item;
+        if (control is ContentPresenter { Child: NavigationMenuItem item2 }) return item2;
+        return null;
+    }
 }