How do I create a dropdown button with toggle functionality?

please can you somebody from support respond to my query. thanks.

Hi there,

use a Navigation Menu block, you can add single menu item, with a list of drop down menu items.

Ok am trying it out as we speak.

How do I change the down arrow icon for the drop down to a "+" sign and upon expansion/click change it to "-" ? thanks

Can i see what you have so far ?

unfortunately can't share the link but can do a screen shot

Hi there,

Are you using the WP navigation block?

If so, GP doesn't have control over it as its a WP core block, I've found this support topic might be helpful:
https://wordpress.org/support/topic/customize-navigation-block-hamgurger-icon/

For more info about the navigation block: https://wordpress.com/support/site-editing/theme-blocks/navigation-block/

If you have more questions regarding the navigation block, you can reach out to WP's support.

Yes tried creating with the WP Navigation Block as suggested by David.

So my requirement is simple. I would like to create a drop down button in the content area called, "Product +" which has a submenu/options/list called "Product 1", "Product 2" ... and links to their respective product pages. When clicked on the "Product" button it should show the product list as above and change the button text to "Product -", when clicked again is should hide the product list and change back the product button text to "Product +".

Using Navigation Block to do this kinda works but not sure if it the most elegant solution but unable to simulate the toggle icon change "+/-" upon expand and collapse. Bootstrap's Basic DropDown (with the Toggle) is simple near perfect solution.

https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

Any help will be much appreciated.

Add this CSS to your site:

.custom-nav .wp-block-navigation__container > li > button .wp-block-navigation-item__label:after {
    padding: 0 5px;
    font-size: 1.2em;
    font-weight: bold;
    content: '+';
}
.custom-nav .wp-block-navigation__container > li > button[aria-expanded="true"] .wp-block-navigation-item__label:after {
    content: '-';
}
.custom-nav .wp-block-navigation__container > li > button + .wp-block-navigation__submenu-icon {
    display: none;
}

2. Select the Navigation block in the editor, and in Advanced > Additonal CSS Class(es) add: custom-nav

It works! Thank you Thank you Thank you!

You're welcome