Light
Dark
System
Ask  Question

Metronic action menu not showing

I have integrated this code:
<div class="my-0">
 <button type="button" class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
 <span class="svg-icon svg-icon-2">
 <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 <rect x="5" y="5" width="5" height="5" rx="1" fill="currentColor"></rect>
 <rect x="14" y="5" width="5" height="5" rx="1" fill="currentColor" opacity="0.3"></rect>
 <rect x="5" y="14" width="5" height="5" rx="1" fill="currentColor" opacity="0.3"></rect>
 <rect x="14" y="14" width="5" height="5" rx="1" fill="currentColor" opacity="0.3"></rect>
 </g>
 </svg>
 </span>
 </button>
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px" data-kt-menu="true" >
 <div class="menu-item px-3">
 <div class="menu-content fs-6 text-dark fw-bold px-3 py-4">Quick Actions</div>
 </div>
 <div class="separator mb-3 opacity-75"></div>
 <div class="menu-item px-3">
 <a href="#" class="menu-link px-3">New Ticket</a>
 </div>
 <div class="menu-item px-3">
 <a href="#" class="menu-link px-3">New Customer</a>
 </div>
 <div class="menu-item px-3">
 <a href="#" class="menu-link px-3">New Contact</a>
 </div>
 <div class="separator mt-3 opacity-75"></div>
 <div class="menu-item px-3">
 <div class="menu-content px-3 py-3">
 <a class="btn btn-primary btn-sm px-4" href="#">Generate Reports</a>
 </div>
 </div>
 </div>
 </div>



When I click action menu, dropdown menu not showing.
user
Prakash 8 months ago
Metronic Laravel
3 Answers
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 (3)

S
Sean Author8 months ago
Hi,

We have tested your code and it worked as expected.

Most probably you have some JS errors in your page that prevent the KTMenu initialization.
Can you double check your browser console and fix the js errors ?

Regards.
user
Prakash 8 months ago
There is no errors in the console, do I need to run any KTMenu initialization code, the menu html code is coming via ajax from the backend?
S
Sean Author8 months ago
Hi,

The menu elements are globally initialized on page load. You can try to check any HTML template from the original Metronic package and you can see that all menu instances work without any JS initialization.

May I know how are you using Metronic ? As classic web application where each page requires a full page reload or using the menu in dynamic content? If you have a test link

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

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle