Nav Expanded Parameter Missing in v5

[Alessandro (marrale)]

In v5, I'm missing the "Expanded" parameter for the "Nav" component.
It is documented on the new v5 documentation page, but it doesn't seem to be implemented yet.
Is this parameter planned to be added in one of the next releases?
By the way, thanks a lot for all the work on v5! It's an awesome library with a lot of potential. Congratulations.

[shwetank gupta (shwetankg07)]

In v5 (checked against 5.0.1 on main) Expanded isn't on FluentNav itself. It moved to the categories, plus some methods on the nav:

Per category: FluentNavCategory has Expanded and ExpandedChanged, so you can bind it:

<FluentNav @ref="nav" UseSingleExpanded="true">
    <FluentNavCategory Id="settings" Title="Settings" @bind-Expanded="settingsOpen">
        ...
    </FluentNavCategory>
</FluentNav>

@code {
    FluentNav nav = default!;
    bool settingsOpen = true;
}

From code, on the nav: ExpandCategoryAsync(categoryId), CollapseCategoryAsync(categoryId), ExpandAllCategoriesAsync() and CollapseAllCategoriesAsync(). UseSingleExpanded makes it accordion-style (expanding one collapses the others; ExpandAll then only opens the first).

If you meant the v4 FluentNavMenu.Expanded that collapsed the whole menu down to icons, there's no equivalent parameter on FluentNav in 5.0.1 (its parameters are UseIcons, UseSingleExpanded, Density, Width, colors, OnItemClick). For now you'd control that from the layout (e.g. toggling the nav's container or Width), and the maintainers would have to say whether a built-in collapse is planned.

[Alessandro (marrale)]

Thanks for the answer. Yes, my request refers to the v4 FluentNavMenu.Expanded behavior, which collapses the entire menu to icons only. Let's wait for the maintainer's response.

[Denis Voituron (dvoituron)]

Vincent Baaij (@vnbaaij) FYI

[Vincent Baaij (vnbaaij)]

As shwetank gupta (@shwetankg07) says, in v5 you can programmatically expand/collapse nav categories (there is an example of that on the Nav page).

The v5 components follow the Fluent Design and the Fluent UI React components closer than the v4 components did. The Fluent Design Nav specs do not describe an 'icon only' layout as an option so that is why we have not migrated over this functionality

[Vincent Baaij (vnbaaij)]

Thanks for the answer.
In that case, is the recommended way to hide the navbar the approach shown on your documentation homepage?

Yes.

And will the parameters that have not been migrated to v5 be removed from the Nav documentation page?
https://www.fluentui-blazor.net/Nav

Which parameters are you talking about exactly? I don't think there are parameters there that are not supported (as the parameter lists come from the code comments)

[Alessandro (marrale)]

Which parameters are you talking about exactly?

Sorry, my mistake. Everything is fine.

By the way, what does the star ✨at the end of some parameters mean?

[Vincent Baaij (vnbaaij)]

The ones with a star are on the component itself. The ones without come from the base component

[Alessandro (marrale)]

One more question: Are you planning to add the expandable navbar, as shown on the demo page, to the templates?

[Vincent Baaij (vnbaaij)]

Not sure what you mean by that