Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Menu: Allow simplified submenu syntax #10469

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 3 commits into from
Dec 18, 2024
Merged

Menu: Allow simplified submenu syntax #10469

merged 3 commits into from
Dec 18, 2024

Conversation

danielchalmers
Copy link
Member

@danielchalmers danielchalmers commented Dec 18, 2024 •
edited by henon
Loading

Description

Part of #10255. See the example page for the updated, simplified syntax.

The menu activator previously always created a Button and users would manually wrap it inside a Menu Item. Now, if it detects that it’s part of a parent menu, it automatically creates a Menu Item instead, ensuring a more seamless layout.

This update also adds new selector classes and includes documentation and test updates.

Old Syntax:

<MudMenu Label="Open Nested Menu Example">

    <MudMenuItem>Add reaction</MudMenuItem>

    <MudMenuItem>Add bookmark</MudMenuItem>

    <MudMenu AnchorOrigin="Origin.TopRight" ActivationEvent="@MouseEvent.MouseOver">
        <ActivatorContent>
            <MudMenuItem>Format ></MudMenuItem>
        </ActivatorContent>

        <ChildContent>
            <MudMenu AnchorOrigin="Origin.TopRight" ActivationEvent="@MouseEvent.MouseOver">
                <ActivatorContent>
                    <MudMenuItem>Text ></MudMenuItem>
                </ActivatorContent>

                <ChildContent>
                    <MudMenuItem>Bold</MudMenuItem>

                    <MudMenuItem>Italic</MudMenuItem>

                    <MudMenuItem>Underline</MudMenuItem>

                    <MudMenu AnchorOrigin="Origin.TopRight" ActivationEvent="@MouseEvent.MouseOver">
                        <ActivatorContent>
                            <MudMenuItem>Size ></MudMenuItem>
                        </ActivatorContent>

                        <ChildContent>
                            <MudMenuItem>Increase font size</MudMenuItem>

                            <MudMenuItem>Decrease font size</MudMenuItem>
                        </ChildContent>
                    </MudMenu>
                </ChildContent>
            </MudMenu>

            <MudMenu AnchorOrigin="Origin.TopRight" ActivationEvent="@MouseEvent.MouseOver">
                <ActivatorContent>
                    <MudMenuItem>Points ></MudMenuItem>
                </ActivatorContent>

                <ChildContent>
                    <MudMenuItem>Bullet</MudMenuItem>

                    <MudMenuItem>Number</MudMenuItem>
                </ChildContent>
            </MudMenu>

            <MudMenu AnchorOrigin="Origin.TopRight" ActivationEvent="@MouseEvent.MouseOver">
                <ActivatorContent>
                    <MudMenuItem>Alignment ></MudMenuItem>
                </ActivatorContent>

                <ChildContent>
                    <MudMenuItem>Left</MudMenuItem>

                    <MudMenuItem>Right</MudMenuItem>
                </ChildContent>
            </MudMenu>

            <MudMenuItem>Clear formatting</MudMenuItem>

            <MudMenuItem>Headers and footers</MudMenuItem>
        </ChildContent>
    </MudMenu>

</MudMenu>

New syntax:

<MudMenu Label="Open Nested Menu">
    <MudMenuItem>Add reaction</MudMenuItem>
    <MudMenuItem>Add bookmark</MudMenuItem>

    <MudMenu Label="Format >" AnchorOrigin="Origin.TopRight" ActivationEvent="@MouseEvent.MouseOver">
        <MudMenu Label="Text >" AnchorOrigin="Origin.TopRight" ActivationEvent="@MouseEvent.MouseOver">
            <MudMenuItem>Bold</MudMenuItem>
            <MudMenuItem>Italic</MudMenuItem>
            <MudMenuItem>Underline</MudMenuItem>

            <MudMenu Label="Size >" AnchorOrigin="Origin.TopRight" ActivationEvent="@MouseEvent.MouseOver">
                <MudMenuItem>Increase font size</MudMenuItem>
                <MudMenuItem>Decrease font size</MudMenuItem>
            </MudMenu>
        </MudMenu>

        <MudMenu Label="Points >" AnchorOrigin="Origin.TopRight" ActivationEvent="@MouseEvent.MouseOver">
            <MudMenuItem>Bullet</MudMenuItem>
            <MudMenuItem>Number</MudMenuItem>
        </MudMenu>

        <MudMenu Label="Alignment >" AnchorOrigin="Origin.TopRight" ActivationEvent="@MouseEvent.MouseOver">
            <MudMenuItem>Left</MudMenuItem>
            <MudMenuItem>Right</MudMenuItem>
        </MudMenu>

        <MudMenuItem>Clear formatting</MudMenuItem>
        <MudMenuItem>Headers and footers</MudMenuItem>
    </MudMenu>
</MudMenu>

How Has This Been Tested?

unit

Type of Changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation (fix or improvement to the website or code docs)

This is what it looked like with the new syntax but the old code:

image

Should be

image

Checklist

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

@github-actions github-actions bot added enhancement Request for adding a new feature or enhancing existing functionality (not fixing a defect) PR: needs review labels Dec 18, 2024
@codecov Codecov
Copy link

codecov bot commented Dec 18, 2024

Codecov Report

Attention: Patch coverage is 0% with 1 line in your changes missing coverage. Please review.

Project coverage is 91.51%. Comparing base (cbf4d30) to head (06ab552).
Report is 1 commits behind head on dev.

Files with missing lines Patch % Lines
src/MudBlazor/Components/Menu/MudMenu.razor 0.00% 0 Missing and 1 partial ⚠️
Additional details and impacted files 
@@            Coverage Diff             @@
##              dev   #10469      +/-   ##
==========================================
- Coverage   91.51%   91.51%   -0.01%     
==========================================
  Files         426      426              
  Lines       13277    13278       +1     
  Branches     2549     2550       +1     
==========================================
  Hits        12151    12151              
  Misses        552      552              
- Partials      574      575       +1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@danielchalmers danielchalmers changed the title Menu: Allow simplified sub menu activator syntax Menu: Allow simplified submenu syntax Dec 18, 2024
@danielchalmers

This comment was marked as outdated.

Sign in to view
@sonarqubecloud SonarQubeCloud
Copy link

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@danielchalmers
Copy link
Member Author

Migration Guide:

  • MudMenus that were nested inside another MudMenu will now be rendered as a MudMenuItem instead of MudButton

@henon henon added breaking change This change will require consumer code updates and removed PR: needs review labels Dec 18, 2024
@henon
Copy link
Collaborator

henon commented Dec 18, 2024

It is a change for the better in any case. I just added the breaking change label for good measure.

henon
henon approved these changes Dec 18, 2024
View reviewed changes
Copy link
Collaborator

@henon henon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love the new syntax. LGTM

@danielchalmers
Copy link
Member Author

@ScarletKuro If you have any concerns let me know so I can take care of them in my follow up PRs

@danielchalmers danielchalmers merged commit cb0240c into MudBlazor:dev Dec 18, 2024
4 checks passed
@danielchalmers danielchalmers deleted the menu-simplified-sub-menu-markup branch December 18, 2024 17:25
@ScarletKuro
Copy link
Member

ScarletKuro commented Dec 18, 2024 •
edited
Loading

This should be added to migration guide, I guess you could create a section for all MudMenu changes, you should have the rights to edit my comment I think

@danielchalmers danielchalmers mentioned this pull request Dec 18, 2024
Open
@dependabot dependabot bot mentioned this pull request Aug 1, 2025
Closed
This was referenced Aug 18, 2025
Closed
Merged
@dependabot dependabot bot mentioned this pull request Aug 27, 2025
Merged
@dependabot dependabot bot mentioned this pull request Sep 8, 2025
Open
@dependabot dependabot bot mentioned this pull request Sep 22, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@henon henon henon approved these changes

@ScarletKuro ScarletKuro Awaiting requested review from ScarletKuro

Assignees
No one assigned
Labels
breaking change This change will require consumer code updates enhancement Request for adding a new feature or enhancing existing functionality (not fixing a defect)
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@danielchalmers @henon @ScarletKuro