Christmas Sale! Limited Time Only - Enjoy 30% Off Metronic Extended License!
Buy for 669$  969$

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
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • 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
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(