fluentui-blazor
fluentui-blazor copied to clipboard
feat: add horizontal nav menu component
I've created a horizontal nav menu inside of my TempusHub2 project
I could fit back the horizontal nav back into the component library, but only if the maintainers agree :)
The preview of that site is at https://preview.tempushub.xyz
Let me know, and I'm happy to make a proper PR :)
The code example would look like this:
<NavMenuButton Text="Dashboard"
Icon="@(new Icons.Regular.Size16.Grid())">
<MenuItems>
<NavMenuItem Text="Overview"
Icon="@(new Icons.Regular.Size16.Flowchart())"
Href="/dashboard"/>
</MenuItems>
</NavMenuButton>
<NavMenuButton Text="Leaderboards"
Icon="@(new Icons.Regular.Size16.Trophy())">
<MenuItems>
<NavMenuItem Text="Maps"
Icon="@(new Icons.Regular.Size16.Map())"
Href="/leaderboard/maps"/>
<NavMenuItem Text="Players"
Icon="@(new Icons.Regular.Size16.Person())"
Href="/leaderboard/players"/>
</MenuItems>
</NavMenuButton>
The navbar that I use is called Header in the layout section of the example and is the FluentHeader tag. Does this help you? Do you put your NavMenuButton in the FluentHeader? Do you use FluentSpacer to separate items?
That would be a very good idea, I think.
Why not improve the existing FluentMenuButton component?
By adding the properties IconStart, IconEnd, Href and updating the (not very fine) "drop down" icon :-)
<FluentStack>
<FluentMenuButton Text="Dashboard" ButtonAppearance="Appearance.Stealth">
<FluentMenuItem>Overview</FluentMenuItem>
</FluentMenuButton>
<FluentMenuButton Text="Leaderboards" ButtonAppearance="Appearance.Stealth">
<FluentMenuItem>Maps</FluentMenuItem>
<FluentMenuItem>Players</FluentMenuItem>
</FluentMenuButton>
<FluentMenuButton Text="Play" ButtonAppearance="Appearance.Stealth" />
</FluentStack>
Sounds good. I'll look into that tonight @dvoituron
Hi Luke, Any update on this?
Hi @Hona I was looking for this feature too, have you done something?
Closing this as no progress made.