Dismiss dropdown menu
Hi,
Is there a preimplemented way to close a dropdown menu on button click?
For example, on metronic react demo 2 notification logs, I'd like to close the menu when clicking on View all. What would be the best way to do this?
Best wishes,
Tamás
Replies (10)
function NotificationDropdown() {
// State to manage the dropdown visibility
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
// Function to toggle dropdown visibility
const toggleDropdown = () => {
setIsDropdownOpen(!isDropdownOpen);
};
// Function to close the dropdown
const closeDropdown = () => {
setIsDropdownOpen(false);
};
return (
<div>
<button onClick={toggleDropdown}>
Notifications
</button>
{isDropdownOpen && (
<div className="dropdown-menu">
<p>Notification 1</p>
<p>Notification 2</p>
<p>Notification 3</p>
<button onClick={closeDropdown}>
View all
</button>
</div>
)}
</div>
);
}
export default NotificationDropdown;
slope game
Dive into the exhilarating world of blackjack with our comprehensive guide. From the basics of gameplay to advanced strategies, we cover everything you need to know to become a master of the game. Whether you're https://www.ardijah.co.nz/payments/mastercard/ a novice player or a seasoned pro, our article provides valuable insights and tips to help you maximize your chances of success at the blackjack table. Join us as we explore the timeless allure of this classic card game.
There's a possibility that it could be related to cached data. To troubleshoot this, could you please try clearing your browser cache and then revisiting the demo URL
Read more: https://devs.keenthemes.com/question/dismiss-dropdown-menu-backrooms game
Hi 
,
Can you try to use the HTML attribute the view all links?
"data-kt-menu-dismiss='true'"
Regards
Hi Sean,
That worked wonderfully. Thanks!
Is there anywhere I can see all the available attributes for future reference?
Best,
Tamás
Hi,
At the moment we do not have a separate components doc for React version, but usage and attribute names should be the same as they are in the HTML version.
You can refer to our HTML version doc.
Thanks Lauris, got it.
Another question I had based on this, is how could one conditionally change some text based on the opened or closed state of an accordion elemenet?
You can add new styles to your component and then modify tag content depending on the accordion state.
.accordion-button.collapsed:before {
content: "more"
}
.accordion-button:before {
content: "less"
}
