I'm currently trying to create a drop down menu for a windows application. The button where you click on to show the drop down menu has a default, hover and selected state, with the selected state showing the dropdown menu. The items in the dropdown menu will have the same default, hover and selected effects. I'm having great difficulty trying to prototype this. If I copy the main button and place it in the selected state to create the drop down menu items, the drop down menu items get a red outline. I've tried other methods which just end up like this (see video attached).
I hope someone can help me with this.
You can't nest a component within an instance of itself. The red border means its states don't function.
If you want the menu items to be instances of a component, you will have to make a separate component for them, even if it looks the same.
Do the menu items need to have dropdowns as well? Will they act like an accordion menu?
I managed to get it to work in the end, and yes, it will act like an accordion menu! Right now I'm trying to figure out how I would 'push' the other buttons down when clicking on a button and opening the sub menu.
You'll have to set this up manually. You will have a state of the menu component for each expanded button, where it has a menu and the others are moved down. If you are struggling with it, you can check out this file and prototype I made to show another user how to set it up in a different thread. Only instead of the text, you will have more menu items.