I'm trying to create a button set that can be used to move through hierarchical data and it's looking like a swastika. I'm not sure how to correct it.
In the image above if "Panel" was selected and you press the top button it would select "AnimatedPanel". If you clicked the left button it would select, "Script". If you clicked the right button nothing would change since panel is the last item in the list. If you select the bottom button, "EventHandler" would be selected.
The button set will sit to the left of the label. The label and the button will be shown when an item is selected. For example, in a web page there may be a list of vertical or horizontal menu items. The button set and the label would sit above the selected menu. Then pressing "in" would select the first menu item. Selecting "left" or "right" would move through the menu items. I hope that makes sense.
Any suggestions how to make this less whatever it is?
More detail for @PremierBromanov:
The way I have it now I have 3 labels all in a row like so "Up" "L" "R" "Panel".
I'm using the terms "up", "left" and "right" but "up" is really "move out of the current row and back up to the previous row". Those terms are based loosely on how it's displayed in a horizontal like layout (although in a vertical it no longer makes sense).
In XML they use terms like branch node and leaf nodes. A branch has or can have leaf nodes. Hierarchical data also uses the terms parent node and child nodes. In that case, you have ancestors and descendants. You also have siblings. They are child nodes that share the same parent.
So in the last case you could have parent, previous sibling, next sibling and descendants of the current child node. You could also have Parent Branch, previous left, next leaf. In this case if a leaf has leaves it would be a branch. So parent branch, previous leaf or branch, next leaf or branch, and leaves of current branch.