Skip to content

Link to parent menu item#8225

Merged
javierjulio merged 7 commits intoactiveadmin:masterfrom
hasghari:main-menu-navigation
Jan 27, 2026
Merged

Link to parent menu item#8225
javierjulio merged 7 commits intoactiveadmin:masterfrom
hasghari:main-menu-navigation

Conversation

@hasghari
Copy link
Contributor

@hasghari hasghari commented Jan 9, 2024

Currently when rendering a nested menu, if the parent menu item links to a url, the link is not rendered for the parent item and there is no way to navigate to it.

Here is the nested menu appearance for light mode and dark mode

I'm not a designer by any means so I'm open to changing the UI.

Closes #8245

@hasghari hasghari force-pushed the main-menu-navigation branch 2 times, most recently from 4775e2f to 358317b Compare January 9, 2024 23:54
@codecov
Copy link

codecov bot commented Jan 9, 2024

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.08%. Comparing base (75acaf3) to head (e72df6c).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #8225   +/-   ##
=======================================
  Coverage   99.08%   99.08%           
=======================================
  Files         139      139           
  Lines        4045     4045           
=======================================
  Hits         4008     4008           
  Misses         37       37           

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

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@hasghari hasghari force-pushed the main-menu-navigation branch 2 times, most recently from 8349e5e to b36fd5a Compare January 11, 2024 14:17
@hasghari hasghari requested a review from tagliala January 11, 2024 14:26
@hasghari hasghari force-pushed the main-menu-navigation branch 3 times, most recently from def150a to 48f2861 Compare January 13, 2024 13:47
@javierjulio
Copy link
Member

javierjulio commented Jan 13, 2024

This is made to sound like it's considered a bug but from what I know this is intentional. It wasn't supported previously. Also, I don't think it's a good default for the parent menu item to have a link and a separate toggle. I will not accept this change, sorry.

Although, you should be able to make this change for your own implementation, that's why we have the navigation in a partial so you can customize it. For that, it seems you would need a Ruby method update to support that case which is something I would accept. You're welcome to contribute just that change here.

The JS is only meant as a default, out of the box. You can supply your own JS for custom menu behavior by just changing the element id and working off that. Perhaps, in the future we can expand on the JS so you don't have to import/load what you end up replacing or don't use. I would appreciate any help or suggestions around that for a v4 release.

@hasghari
Copy link
Contributor Author

@javierjulio Actually, this was supported in version 3. Take a look at the following snippet in the menu.feature spec:

Scenario: Adding a resource as a sub menu item
  Given a configuration of:
  """
    ActiveAdmin.register User
    ActiveAdmin.register Post do
      menu parent: 'Users'
    end
  """
  When I am on the dashboard
  Then I should see a menu item for "Users"
  And the "Posts" menu item should be hidden
  When I follow "Users"
  Then the "Users" menu item should be selected
  And I should see a nested menu item for "Posts"

Without the change in this pull request, there is no way for you to navigate to the User resource. I think this is a bug.

@javierjulio
Copy link
Member

@hasghari sorry, I don't use that feature. I'm not familiar with it at all. Nor do we seem to have it in the generated app for development or test. Often times these features are latter discovered unless built in to the development app. It's not possible for us to know all of them. Can you please modify the dev app that is generated locally to use that feature and share what changes you had to do to get that? I'm not able to replicate this. I don't have any idea what it would even render. Thank you.

@hasghari hasghari force-pushed the main-menu-navigation branch 3 times, most recently from 93cf695 to 5b59de1 Compare January 14, 2024 03:38
@hasghari
Copy link
Contributor Author

hasghari commented Jan 14, 2024

@javierjulio I added a new nested resource in the generated app called Profile. When you run rake local server, you will see the menu item for "Profiles" nested under "Users". Without this pull request, the "Users" item does not navigate anywhere. This pull request adds the link to the resource.

@mgrunberg mgrunberg mentioned this pull request Jan 29, 2024
@tagliala tagliala linked an issue Jan 29, 2024 that may be closed by this pull request
@mgrunberg
Copy link
Contributor

@javierjulio Actually, this was supported in version 3. Take a look at the following snippet in the menu.feature spec:

Scenario: Adding a resource as a sub menu item
  Given a configuration of:
  """
    ActiveAdmin.register User
    ActiveAdmin.register Post do
      menu parent: 'Users'
    end
  """
  When I am on the dashboard
  Then I should see a menu item for "Users"
  And the "Posts" menu item should be hidden
  When I follow "Users"
  Then the "Users" menu item should be selected
  And I should see a nested menu item for "Posts"

Without the change in this pull request, there is no way for you to navigate to the User resource. I think this is a bug.

The PR LTGM, I use this feature so thanks for fixing it.
I'm wondering why the feature test didn't fail. @hasghari, do you know?
I think the PR should also fix that.

@henrikbjorn
Copy link

@javierjulio Is it possible to get a fix for this in, hopefully we have changed your mind on this feature :)

@hasghari hasghari force-pushed the main-menu-navigation branch from 5b59de1 to 6ed5a79 Compare May 5, 2024 13:43
@hasghari hasghari force-pushed the main-menu-navigation branch from 6ed5a79 to 2eb84b4 Compare May 31, 2024 17:36
@henrikbjorn
Copy link

@javierjulio Sorry to ping again, but this is a really wanted feature and honestly a blocker for upgrading

@hasghari hasghari force-pushed the main-menu-navigation branch from 2eb84b4 to f112e59 Compare June 17, 2024 14:34
@hasghari hasghari force-pushed the main-menu-navigation branch 2 times, most recently from 1786e40 to c1ed616 Compare July 28, 2024 16:28
@henrikbjorn
Copy link

@javierjulio ?

@k0va1
Copy link

k0va1 commented Aug 13, 2024

Hi guys! I bumped into the same issue #8245

Do u need any help with the PR? I'd be really happy to get this thing merged

@hasghari hasghari force-pushed the main-menu-navigation branch from c1ed616 to db18096 Compare August 13, 2024 14:18
@javierjulio
Copy link
Member

@hasghari we will merge #8709 first to bump Tailwind from v3 to v4 then we'll come back to this. Nothing to do for now until #8709 is merged. I'm not sure if the major version affects your changes, it may not, but feel free to test yourself if you like. Once #8709 is merged, I'll test this and suggest any changes. Both updates are planned to go in the next beta release. Thank you for your patience.

@hasghari hasghari force-pushed the main-menu-navigation branch 2 times, most recently from 74ba0f9 to 480f03e Compare November 7, 2025 15:29
@hasghari hasghari force-pushed the main-menu-navigation branch from 480f03e to a3a5758 Compare November 21, 2025 23:48
@hasghari
Copy link
Contributor Author

@hasghari we will merge #8709 first to bump Tailwind from v3 to v4 then we'll come back to this. Nothing to do for now until #8709 is merged. I'm not sure if the major version affects your changes, it may not, but feel free to test yourself if you like. Once #8709 is merged, I'll test this and suggest any changes. Both updates are planned to go in the next beta release. Thank you for your patience.

@javierjulio Thanks, I've rebased this PR branch against master.

Copy link
Member

@javierjulio javierjulio left a comment

Choose a reason for hiding this comment

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

@hasghari when the parent menu item acts as a grouping without a dedicated page, clicking that link (e.g. "Administrative") does nothing when it should toggle the sub menu as it did before. That will require an update to handle that case. The new behavior (e.g. "Users") looks good. We can adjust the styling after we've fixed the first case. In the meantime, I'll think of what styles to change there. If you have any suggestions or examples you've seen in the wild for that new case, please share. Thank you.

@hasghari hasghari force-pushed the main-menu-navigation branch from a3a5758 to 9853ed6 Compare January 13, 2026 03:48
@hasghari
Copy link
Contributor Author

@javierjulio Thanks for the feedback. I've updated the code to address the issue you raised.

@javierjulio
Copy link
Member

@hasghari my expectation here was that for the original case, that the parent menu item was one button. I pushed some updates so that case remains, while the new one addresses the split button setup: a link for the page destination and a toggle button for the nested menu. This also applies the desired default styles for all cases. Please give this a try and let me know how it works. If all clear, I'll approve and merge. We'll cut a release with this update. Thanks.

hasghari and others added 7 commits January 26, 2026 19:31
Currently when rendering a nested menu, if the parent menu item
links to a url, the link is not rendered for the parent item
and there is no way to navigate to it.
We'll be applying left margin on a different element for the entire sub menu. We will also use ms-* instead of ml-* for RTL support.
This handles the original case where the parent menu item has no actual page URL and is just a togglable container, so we want the arrow SVG as part of the button content.

The new case is the parent menu item has an actual page URL so the element is split in two: a link for the page and a button for toggling the nested menu.
The parent menu item can be either a link or button depending on the content so search for either element in the selector.
@hasghari
Copy link
Contributor Author

@hasghari my expectation here was that for the original case, that the parent menu item was one button. I pushed some updates so that case remains, while the new one addresses the split button setup: a link for the page destination and a toggle button for the nested menu. This also applies the desired default styles for all cases. Please give this a try and let me know how it works. If all clear, I'll approve and merge. We'll cut a release with this update. Thanks.

@javierjulio Looks good to me, thanks for making that change.

Copy link
Member

@javierjulio javierjulio left a comment

Choose a reason for hiding this comment

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

Thanks!

@javierjulio javierjulio merged commit ae4778e into activeadmin:master Jan 27, 2026
26 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

v4: nesting in menus

6 participants