Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add horizontal nav menu component #1922

Open
Hona opened this issue Apr 23, 2024 · 4 comments
Open

feat: add horizontal nav menu component #1922

Hona opened this issue Apr 23, 2024 · 4 comments
Labels
community:contribution Issue will be addressed by community contribution
Milestone

Comments

@Hona
Copy link
Contributor

Hona commented Apr 23, 2024

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>
@microsoft-github-policy-service microsoft-github-policy-service bot added the triage New issue. Needs to be looked at label Apr 23, 2024
@coderdnewbie
Copy link

coderdnewbie commented Apr 24, 2024

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?

@dvoituron
Copy link
Collaborator

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

@Hona
Copy link
Contributor Author

Hona commented Apr 24, 2024

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

@vnbaaij vnbaaij added community:contribution Issue will be addressed by community contribution and removed triage New issue. Needs to be looked at labels Apr 26, 2024
@vnbaaij vnbaaij added this to the v4.7.2 milestone Apr 26, 2024
@vnbaaij vnbaaij modified the milestones: v4.7.2, 4.7.3 May 4, 2024
@vnbaaij
Copy link
Collaborator

vnbaaij commented May 16, 2024

Hi Luke,
Any update on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
community:contribution Issue will be addressed by community contribution
Projects
None yet
Development

No branches or pull requests

4 participants