fluentui-blazor icon indicating copy to clipboard operation
fluentui-blazor copied to clipboard

feat: add horizontal nav menu component

Open Hona opened this issue 1 year ago • 5 comments

fluentuiblazor horizontalnavmenu

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>

Hona avatar Apr 23 '24 23:04 Hona

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?

coderdnewbie avatar Apr 24 '24 06:04 coderdnewbie

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>

image

dvoituron avatar Apr 24 '24 07:04 dvoituron

Sounds good. I'll look into that tonight @dvoituron

Hona avatar Apr 24 '24 07:04 Hona

Hi Luke, Any update on this?

vnbaaij avatar May 16 '24 21:05 vnbaaij

Hi @Hona I was looking for this feature too, have you done something?

f4n0 avatar Jun 11 '24 08:06 f4n0

Closing this as no progress made.

vnbaaij avatar Jul 23 '24 19:07 vnbaaij