Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Sidebar


How can i make the sidebar permanently collapsed and get the submenus in hover over the side bar menus in metronic 8.2.2v "react". please help i am design a dashboard for my customer.


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 (7)


To permanently collapse the sidebar in Metronic 8.2.2 React and enable bloxstrap submenus on hover, use the KTLayoutSidebar configuration. Set the sidebar's default state to collapsed and implement hover functionality for submenu expansion using KTMenu utilities. Refer to Metronic's documentation for detailed steps on customizing layouts.



You can achieve this by customizing the sidebar component in Metronic 8.2.2v "react". You can set the sidebar to be permanently fnaf world collapsed by modifying the state or props of the sidebar component.



Quran Pak - Discover a diverse collection of authentic Quran texts, available in various styles and formats. Perfect for both personal study and gifting, our Quran Pak offerings cater to your spiritual needs and preferences.

Slots: Online slots are a staple at any online casino, and Connecticut is no exception. Players can choose from hundreds of slot titles, ranging from classic three-reel games to modern video slots with exciting bonus features. Many online slots also offer progressive jackpots, giving players the chance to win life-changing sums of money.



As for implementing hover-over submenus, you'll need to make some adjustments to the sidebar's styling and behavior. Typically, hover-over submenus are achieved through CSS and JavaScript. You can use CSS to hide the submenus by default and show them when the user hovers over the corresponding sidebar menu item. JavaScript can be used to handle the hover event and toggle the visibility of the submenus.



Hi Vineet,

Thank you for reaching out to us.

To make the sidebar collapsed by default you can update the configuration file src/_metronic/layout/core/_LayoutConfig.ts.

Change minimize properties as shown below.

minimize: {
desktop: {
enabled: true,
default: true,
hoverable: true,
},
},


Run your app, clear the localStorage, and hard refresh your page to use the updated layout configuration.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


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  :(