The title I chose may not be very clear, but I struggled to find the right words. Currently, I have a vertical navigation bar with a small caret next to the text. When clicked, the button expands to display its contents.
In the image above, you can see that I am trying to add a secondary caret to the right of each button. This secondary caret should function independently from the main button. I am using twitter-bootstrap and believe I can split the button into two separate parts, each with its own function. One part would uncollapse the menu when clicked, while the other part would redirect to another page via a link. Right now, both parts collapse and uncollapse the menu when clicked.
The issue is that the right facing caret is positioned oddly relative to the main button. I want it to align neatly to the right, similar to the Twitter-Bootstrap example. I like the visual style of the current buttons but need help adding this secondary caret and ensuring it functions separately.
TL;DR: How can I split a button into two parts while keeping the styling intact and giving each part its own functionality?
(View larger image) https://i.sstatic.net/ANPWm.png