Add multi-level hierarchy to NavigationView

Proposal: Add multi-level hierarchy to NavigationView

Spec for this feature is available for review here.

Summary

Today, NavigationView’s menu is a flat list of destinations. Adding hierarchy to the navigation menu would enable showing top-level categories and child sub-categories in the same place, which would help clarify for users the overall structure of the app.

Rationale

It’s common for complex apps to want to show multiple levels of navigation items. Although it’s possible to achieve hierarchy in the navigation pane today by placing the TreeView control into NavigationView’s PaneCustomContent area, there are multiple drawbacks to this approach. From the UI perspective, TreeView behaves poorly in NavigationView’s LeftCompact mode, and is not feasible in Top mode. For the developer, switching from NavigationView’s MenuItems list to a TreeView requires significant rewrites of the underlying data model. By providing a hierarchical solution directly within NavigationView we can eliminate implementation cliffs, significantly improve the user experience, and provide consistency across the app ecosystem.

Functional Requirements

#	Feature	Priority
1	NavigationViewItem supports any number of child items in both Left and Top NavigationView modes	Must
2	Child items can be declared in markup	Must
3	NavigationView continues to support data binding for all its MenuItems	Must
4	Child items can be added or removed dynamically	Must
5	Selecting an item with children will show/hide the child items	Must
6	When the NavigationView Pane is closed, an item will appear selected if either itself or one of its child items is selected	Must
7	Hierarchical items’ keyboard behavior matches TreeView’s (with some adjustments for Top vs Left NavigationView)	Must
8	Items with children draw a chevron as a visual indicator that they can be expanded/collapsed	Must
9	The chevron changes orientation based on whether the item is open or closed	Should
10	Hierarchical items’ open/close animations feel like they’re part of the same system as TreeView and MenuFlyoutSubItem animations	Should
11	Support for “accordion” behavior which makes it easy for apps to show at most one expanded parent item at a time	Should

Usage Examples

Create a hierarchical NavigationView in markup. This sample has two top-level categories, Home and Collections. The Collections item can be expanded to show its child sub-categories, Bookshelf and Mail.

<muxc:NavigationView>
    <muxc:NavigationView.MenuItems>
        <muxc:NavigationViewItem Content="Home" Icon="Home" ToolTipService.ToolTip="Home"/>
        <muxc:NavigationViewItem Content="Collections" 
                               Icon="Keyboard" ToolTipService.ToolTip="Collections">
            <muxc:NavigationViewItem.MenuItems>
                <muxc:NavigationViewItem Content="Bookshelf" 
                                    Icon="Library" ToolTipService.ToolTip="Bookshelf"/>
                <muxc:NavigationViewItem Content="Mail" 
                                    Icon="Mail" ToolTipService.ToolTip="Mail"/>
            </muxc:NavigationViewItem.MenuItems>
        </muxc:NavigationViewItem>                        
    </muxc:NavigationView.MenuItems>
</muxc:NavigationView>

Detailed Feature Design

Design mockups

These comps are not finalized and are shown here to illustrate the visual direction we’re proposing.

Proposed API

Additions to existing NavigationViewItem class

public class NavigationViewItem : NavigationViewItemBase
{
    bool HasUnrealizedChildren { get; set; }
    bool IsChildSelected { get; set; }
    bool IsExpanded { get; set; }
        
    IList<Object> MenuItems { get; }
    Object MenuItemsSource { get; set; }
}

Additions to existing NavigationView class

public class NavigationView : ContentControl
{
    TypedEventHandler<NavigationView, NavigationViewExpandingEventArgs> Expanding;
    TypedEventHandler<NavigationView, NavigationViewCollapsedEventArgs> Collapsed;

    public void Expand(NavigationViewItem item);
    public void Collapse(NavigationViewItem item);

    bool AllowMultipleExpandedItems { get; set; }
}

public sealed class NavigationViewExpandingEventArgs
{
    NavigationViewItemBase Item { get; }
}

public sealed class NavigationViewCollapsedEventArgs
{
    NavigationViewItemBase Item { get; }
}

Open Questions

1. When NavigationView is in LeftCompact or Top modes, should items with children expand on mouse hover or mouse click? Discussion of Pros and Cons:

   • Typically, Xaml controls show a hover state (e.g. reveal highlight) but don’t change the content displayed to users. Notable exceptions to this rule of thumb are MenuFlyoutSubItem and MenuBar after the first click.
   • Showing a flyout with child items on hover improves discoverability. Chevrons are likely to be omitted in LeftCompact mode, so users would not be able to tell just by looking whether an item has children.
   • Showing a flyout on hover may be perceived by users as a more responsive behavior that saves them an unnecessary click.
   • Showing a flyout on hover has the potential to annoy users. One mitigation is to introduce a short delay before showing the flyout. Another mitigation is to follow the MenuBar behavior - show flyouts with children on hover only after the user has clicked on another parent item.
   • If showing flyout on hover, there’s risk in defining and implementing the correct flyout dismiss behavior. Light dismiss gestures for dismissing a flyout that the user actively invoked are well understood. New lighter-dismiss behavior (e.g. moving the pointer outside the flyout) is not yet defined.

2. Ensure Gamepad experience is defined.

Release Checklists

Prerelease readiness

• Dev: quality review + code review done
• Dev: test coverage added
• Dev: initial accessibility review done
• Dev: telemetry implemented
• PM: spec up to date
• PM: feature ready for feedback
• PM: docs.microsoft.com updates ready

Stable release readiness

• Dev: feature previously shipped in a prerelease NuGet package
• Dev: Azure CI tests passing
• Dev: accessibility review done
• Dev: API review done
• Dev: IDL attribute switched from preview to public
• Dev: Add test coverage to the NugetReleaseTest test
• PM: spec done
• PM: glob/loc, privacy, security, license compliance ready
• PM: customer validation done
• PM: docs.microsoft.com updated
• PM: Xaml Controls Gallery updated

[carloseduardosx]

I agree with @fmassicci and @Joel-Intact, I’m working on a react-native-windows project and I’m creating a port of this component to the RN layer, this feature would be extremely welcomed by my team, we’re looking forward to this feature.

[YuliKl]

Thank you, @fmassicci and @Joel-Intact, for your feedback. Your opinions really help in prioritizing hierarchical NavigationView work relative to other features assigned to my team. Keep your 👍 and your thoughts coming!