Menu

[Rmfjd1978]

Is it possible to make a menu like this without using a markup card with html?

[mturoci]

Almost. Everything should be possible with the existing header card, the only thing missing is a label for ui.menu (App's string in your example) next to the chevron that needs to be added. Feel free to file a feature request.

[Rmfjd1978]

With your sugestion how do i make the submenu?
Because i've tried to put a navgroup inside items a it is not possible

[mturoci]

ui.menu takes items which is a list of ui.command. Each command has it's own recursive prop called items that takes list of ui.commands.

Example:

# Form / Menu
# Create a contextual menu component. Useful when you have a lot of links and want to conserve the space.
# #form #menu
# ---
from h2o_wave import main, app, Q, ui

commands = [
    ui.command(name='profile', label='Profile', icon='Contact', items=[
        ui.command(name='preferences', label='Preferences', icon='Settings'),
        ui.command(name='logout', label='Logout', icon='SignOut'),
    ]),
]


@app('/demo')
async def serve(q: Q):
    if not q.client.initialized:
        q.page['example'] = ui.form_card(box='1 1 2 3', items=[ui.menu(items=commands)])
        q.client.initialized = True
    await q.page.save()

[Rmfjd1978]

yes but i wanted like this:

ui.inlinine([ui.text(content="App's"),
             ui.menu([ui.command(name='#DataKnowledge', label='Dataknowledge'),
                      ui.command(name='#H2o', label='H2O.ai'),
                      ui.command(name='#Anotacao', label='Anotação')])])

but it's better to add a parameter to the menu object, just to make the code more simpliest to the users that use it.

[mturoci]

Agree, that's what #1577 is for. Using ui.inline is the only workaround for now.