Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

metronic aside menu stop auto closing other nested menus


Hi,

Is there a way to stop collapsing other opened nested menu items when you expand another menu item?


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


Hi,

Yes, you can stop the other nested menus from automatically closing when you open a new one by modifying the behavior of the Metronic aside menu. Metronic uses Bootstrap's collapse feature, which by default collapses other open menu items when a new one is expanded.

To prevent this, follow these steps:

Disable the "accordion" behavior: Metronic uses the Bootstrap accordion class to collapse other menu items. You can remove or modify this behavior in the JavaScript controlling the aside menu.

Locate the configuration for the aside menu: In the JavaScript file where Metronic initializes the aside menu, look for something like accordion or data-bs-parent.

Edit the behavior: Remove or change the data-bs-parent attribute in the HTML for the aside menu, or update the JavaScript to stop using the accordion feature. The data-bs-parent is what causes the other items to collapse when a new one is expanded. Tajir



Yes, you can achieve this by modifying the behavior of your menu items. Instead of using the default accordion-style functionality, you could adjust the JavaScript to allow multiple nested items to remain open simultaneously. Depending on your framework or setup, you might need to tweak the event listeners or customize the menu's CSS. If you're using a specific library, there might be a built-in option to disable the auto-collapse feature. What setup are you using?

Surabayaprop



This is an excellent post, wow. I found your material to be quite useful and beneficial. Don't stop spreading the good news. I've bookmarked your site because I found so many useful articles here.
capybara clicker



Hi,

May I confirm if you are using Angular or any other specific framework for your project? The behavior you're describing is not a ready-made option in the Metronic plugin, and achieving it would require customization.

At the moment, we do not have a built-in feature to prevent collapsing other opened nested menu items when expanding another menu item. However, it is under consideration for a future update.

Thank you for your understanding, and we appreciate your feedback as we work towards enhancing our features.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(