Popover iOS hierarchical menu system

[Mark_H]

I am trying to create a hierarchical menu system within a Popover, similar to the one in the Apple iOS ‘Pages’ app:

This allows navigation backwards and forwards within a menu structure to alter various parameters of the app.

What would be the best way of doing this sort of thing in Framework7? Should I be using Views/Pages within the Popover element? When I tried a simple test of this (see code below), the Popover content did not render at all. All I could see what the small arrow at the top.

<Popover id="add-object-popover">
   <View>
      <Page>              
         <Navbar title="Add Object"></Navbar>
         <List>
            <ListItem title="Add Point" link="#"></ListItem>
            <ListItem title="Add Line" link="#"></ListItem>            
         </List>                    
      </Page>
   </View>
</Popover>

Ultimately I would like a click on e.g. the “Add Point” ListItem to navigate to another set of options but within the same Popover, with the option to move ‘Back’ to the main menu if required.

Is this the wrong approach? Are there any examples of this sort of thing?

Thanks.
Mark

[nolimits4web]

This is correct way, you just need to set/specify View’s height in popover, e.g.:

<Popover id="add-object-popover">
   <View style={{height: '300px'}}>

[Mark_H]

Thanks - that works. But is there any way to have the View height expand to it’s contents, perhaps with a max-height setting as well?

Also, if a Navbar is placed in a Popover, it loses it’s rounded corners at the top. Easy enough to fix but should it be the default?