feat: add the possibility to layout the NavMenu horizontally

[iwhp]

🙋 Feature Request

I like to use the NavMenu horizontally:

💁 Possible Solution

There could be an attribute to set the layout: Layout="Vertical" / Layout="Horizontal".

I have the following implemented, which provides a simple solution, but without an attribute. I use a CSS class.

<style>
    /* FluentNavMenu | FluentNavLink - makes the navigation menu a "one liner" */
    .fluent-nav-menu-line {
        width: auto !important;
    }

        .fluent-nav-menu-line .fluent-nav-item {
            display: inline-flex;
        }

        .fluent-nav-menu-line .fluent-nav-text:not(:empty) {
            width: unset !important;
            margin-inline-end: calc(var(--design-unit) * 2px + 2px);
        }
</style>

💻 Examples

@page "/featurenavmenuhorizontal"
@inject NavigationManager NavigationManager
@rendermode @(new InteractiveServerRenderMode(prerender: false))

<h1>Feature: NavMenu - Horizontal</h1>

<FluentLabel Typo="Typography.H5" Style="margin-top:10px;">Standard: Vertical</FluentLabel>
<strong></strong>
<FluentNavMenu>
    <FluentNavLink Icon="@(new Icons.Regular.Size20.SquareHintSparkles())">Item 1</FluentNavLink>
    <FluentNavLink Icon="@(new Icons.Regular.Size20.SquareHintSparkles())">Item 2</FluentNavLink>
    <FluentNavGroup Title="Item 3" Icon="@(new Icons.Regular.Size20.EarthLeaf())">
        <ChildContent>
            <FluentNavLink Icon="@(new Icons.Regular.Size20.LeafOne())">Item 3.1</FluentNavLink>
            <FluentNavLink Icon="@(new Icons.Regular.Size20.LeafTwo())">Item 3.2</FluentNavLink>
        </ChildContent>
    </FluentNavGroup>
    <FluentNavLink Icon="@(new Icons.Regular.Size20.SquareHintSparkles())">Item 4</FluentNavLink>
</FluentNavMenu>

<FluentLabel Typo="Typography.H5" Style="margin-top:10px;">Feature: Horizontal (no NavGroup)</FluentLabel>
<strong></strong>
<FluentNavMenu Class="fluent-nav-menu-line">
    <FluentNavLink Icon="@(new Icons.Regular.Size20.SquareHintSparkles())">Item 1</FluentNavLink>
    <FluentNavLink Icon="@(new Icons.Regular.Size20.SquareHintSparkles())">Item 2</FluentNavLink>
    <FluentNavLink Icon="@(new Icons.Regular.Size20.SquareHintSparkles())">Item 3</FluentNavLink>
</FluentNavMenu>

<FluentLabel Typo="Typography.H5" Style="margin-top:10px;">Feature: Horizontal (with NavGroup - not yet solved)</FluentLabel>
<strong></strong>
<FluentNavMenu Class="fluent-nav-menu-line">
    <FluentNavLink Icon="@(new Icons.Regular.Size20.SquareHintSparkles())">Item 1</FluentNavLink>
    <FluentNavLink Icon="@(new Icons.Regular.Size20.SquareHintSparkles())">Item 2</FluentNavLink>
    <FluentNavGroup Title="Item 3" Icon="@(new Icons.Regular.Size20.EarthLeaf())">
        <ChildContent>
            <FluentNavLink Icon="@(new Icons.Regular.Size20.LeafOne())">Item 3.1</FluentNavLink>
            <FluentNavLink Icon="@(new Icons.Regular.Size20.LeafTwo())">Item 3.2</FluentNavLink>
        </ChildContent>
    </FluentNavGroup>
    <FluentNavLink Icon="@(new Icons.Regular.Size20.SquareHintSparkles())">Item 4</FluentNavLink>
</FluentNavMenu>

<style>
    /* FluentNavMenu | FluentNavLink - makes the navigation menu a "one liner" */
    .fluent-nav-menu-line {
        width: auto !important;
    }

        .fluent-nav-menu-line .fluent-nav-item {
            display: inline-flex;
        }

        .fluent-nav-menu-line .fluent-nav-text:not(:empty) {
            width: unset !important;
            margin-inline-end: calc(var(--design-unit) * 2px + 2px);
        }
</style>

[vnbaaij]

Hi,

There are a lot of things that need to be considered when using this kind of horizontal naviagtion. What if there is not enough room to show the group beneath an item? What if there are so many items the menu goes wider than available space? How do, we show the selected/active item? How do we show the selected item when it is in a group?

Besides all these questions, there is no such element definded in the Fluent Design specifications so we need to define and maintain our own design specs, guardrails, etc.

As you mention in the inclded image, you do not have a solution yet for the NavGroup. I can tell you beforehand that we would need to change a significant amount of the component's code to get that solved. That could potentially introduce (unintended ) breaking changes to the current implementation. We need to prevent that by writing extra tests, etc. I.e. a lot of work.

If you can get it to work with CSS in your own code that's great, but I do not see us adding this as an option for the FluentNavMenu in the short term.

I'm converting this to a discussion so others can chime in as well.