I was wondering how you would handle a multi level off-canvas navigation menu with split buttons. By split button I mean that the user needs to be able to click on the text (level 1) to access level 1, and the arrow to access level 2. I'm afraid that in my case, users won't understand that the arrow grants them access to the sub-levels. Here is what I build so far, when you click on the arrow you get an animation and the sub-menu slides on the top of the current one :
I've seen this pattern a lot lately, but in most case they "skip" level one, meaning that mobile user only get access to sub-levels to avoid the split button issue. You see this kind of behaviordiy.com
This issue here is the arrow I guess. I could use a 'down' arrow like mobify (below) but since the sub-menu comes from the left (and does not open under the main item), I guess it would feel strange.
Any idea of an elegant user friendly solution for this kind of off-canvas menu ?