Customization of Navigation Menu Items

[AniketUndalekar1997]

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

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

[apedroferreira]

Hi, looks like a renderItem property as discussed in https://github.com/mui/toolpad/issues/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.

[AniketUndalekar1997]

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

[apedroferreira]

@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]

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]

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.

[George-Madeley]

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.

Does this work with nested Navigation? i.e., if I have a NavigationItem with children, does the renderItem method get applied to the children?