Recommended structure for nested menu hierarchy? (Multliple menu instances vs dynamic menu content)

Let’s say my app has a multi-level hierarchy of content. Say it’s Country, State/Province, and City, for example.
The top-level menu has you select a Country, and then the main content shows info about the country, and you get a menu with a list of States/Provinces, and you can go a level deeper to a menu of cities.

What’s the suggested structure here if I’m using IonMenu, IonSplitPane, and IonReactRouter? Should I have
A) a single ion-menu instance whose content changes depending on application state or router location or whatever? Or,
B) multiple ion-menu instances which are enabled/disabled by a MenuController?

From my limited understanding A) seems easier structurally since I would just have one menu on the top level and one IonSplitPane (which I’m not sure can be nested). But B) has the advantage of each menu being able to maintain its state, slide in over each other for nice transitions, and being able to keep the Country menu inside the same parent component as the Country main content (better code organization). Or maybe there’s an entirely different approach that works better.

Any advice on what approach is preferred and what the basic structure would look like?

Gonna give this a little bump