[SOLVED] In Vue 3, using PrimeVue, is there a way to change the hamburger menu button to a X when clicked?


With the Menubar component, the hamburger menu is automatically displayed when shrinking the browser window. However, upon clicking that button, I want to change the icon from pi-bars to pi-times. Is there a way to do this?

I’m not even sure how to access the button within the code. The example at https://www.primefaces.org/primevue/#/menubar doesn’t explain it either.


One way to do this is with CSS. The menu gets the .p-menubar-mobile-active class applied when the mobile-mode menu is open, and the icon (<i>) is a descendant of the .p-menubar-button. Change the icon’s ::before content to \e90b, which is the character code for pi-times:

.p-menubar.p-menubar-mobile-active .p-menubar-button i::before {
  content: "\e90b"; /* pi-times icon */


Answered By – tony19

Answer Checked By – Willingham (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *