8000 Customization of Navigation Menu Items · Issue #4581 · mui/toolpad · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Customization of Navigation Menu Items #4581

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
Open
AniketUndalekar1997 opened this issue Jan 9, 2025 · 5 comments
Open

Customization of Navigation Menu Items #4581

AniketUndalekar1997 opened this issue Jan 9, 2025 · 5 comments
Labels
component: layout This is the name of the generic UI component, not the React module! scope: toolpad-core Abbreviated to "core"

Comments

@AniketUndalekar1997
Copy link
AniketUndalekar1997 commented Jan 9, 2025 •
edited by github-actions bot
Loading

Summary

It would be greatly beneficial to have more customization options for navigation menu items. Specifically, I have the following requests:

Prevent Default Routing: Currently, certain menu items default to routing to /. It would be useful to have a way to prevent this default behavior on selected menu items.

Custom Styling:

Increase spacing between menu items: The ability to adjust the spacing between individual menu items would improve the visual layout and readability.

Font size adjustment for NavigationSubheaderItem: A method to increase the font size of NavigationSubheaderItem would enhance its prominence and legibility.

Providing these customization options would significantly enhance the flexibility and usability of the navigation menu.

Examples

Screenshot 2025-01-09 at 12 37 38 PM

Motivation

Customizable navigation menus enhance user experience by allowing more control over the interface. Providing options to prevent default routing, adjust spacing, and change font sizes can lead to a more intuitive and visually appealing navigation system. These features ensure the menu aligns with the overall design and usability goals, offering a more personalized and accessible experience.

Search keywords: Customization of Navigation Menu Items
@AniketUndalekar1997 AniketUndalekar1997 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 9, 2025
@apedroferreira
Copy link
Member

Hi, looks like a renderItem property as discussed in #4413 would help fix most of your issues.
For the spacing and typography, you might be able to use the sx prop in DashboardLayout and target the elements you mean to customize.

@apedroferreira apedroferreira added component: layout This is the name of the generic UI component, not the React module! scope: toolpad-core Abbreviated to "core" and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 9, 20 8000 25
@AniketUndalekar1997
Copy link
Author

@apedroferreira, could you share documentation for this if available ?

@apedroferreira
Copy link
Member
apedroferreira commented Jan 10, 2025 •
edited
Loading

@apedroferreira, could you share documentation for this if available ?

Adding renderItem to navigation items is in our backlog, but we might be able to prioritize it as it seems quite a few people would find it useful.

About the sx prop, it's only really listed here in the DashboardLayout API docs page: https://mui.com/toolpad/core/api/dashboard-layout/
With the sx prop object you should be able to do something like this, for example:

sx={{
  '& .MuiListSubheader-root': {
    fontSize: '1.2rem',
  },
}}

If this helps solve some of your issues and it wasn't super clear how to use maybe we document it more clearly!

@khera
Copy link
khera commented May 8, 2025

I would like the following configurability:

  • disable "expanding". Like disableCollapsibleSidebar but stuck in collapsed mode.
  • option to have no text (just icons) in collapsed mode
  • option to specify the short text in collapsed mode separately from expanded mode, e.g., title and short_title.
  • ability to specify a full URL instead of just segment, such as a link to some video tutorials. Right now I can get away with //example.com/page.html but I feel like I'm probably using some undefined behavior that happens to do what I want.
  • Honor the color of my icon, specifically icon: <ListRounded color="primary" /> should render in primary color.

Some of these should be doable with the custom renderItem, but the first I don't think would be.

@apedroferreira
Copy link
Member

I would like the following configurability:

  • disable "expanding". Like disableCollapsibleSidebar but stuck in collapsed mode.
  • option to have no text (just icons) in collapsed mode
  • option to specify the short text in collapsed mode separately from expanded mode, e.g., title and short_title.
  • ability to specify a full URL instead of just segment, such as a link to some video tutorials. Right now I can get away with //example.com/page.html but I feel like I'm probably using some undefined behavior that happens to do what I want.
  • Honor the color of my icon, specifically icon: <ListRounded color="primary" /> should render in primary color.

Some of these should be doable with the custom renderItem, but the first I don't think would be.

Hi, some of these should be possible with https://mui.com/toolpad/core/react-dashboard-layout/#custom-page-items.
But we can keep this issue open to keep note of the suggestions that haven't been addressed yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: layout This is the name of the generic UI component, not the React module! scope: toolpad-core Abbreviated to "core"
Projects
Toolpad public roadmap
Status: Backlog
Milestone
No milestone
Development

No branches or pull requests
3 participants
@khera @apedroferreira @AniketUndalekar1997
0