How to set Mary-UI sub menu to expand without active sub item.

Hello!, I use volt with blade template, and I dont know how to set default sub menu to expend by default. (Mary-UI)

<x-menu-item title="xxxx" icon="o-building-storefront" link="/" />
            <x-menu-item title="xxxxx" icon="o-shopping-cart" link="/" />
            <x-menu-sub title="xxxxx" icon="o-cog-6-tooth"> // want to expand this without active.
             <x-menu-item title="xxxx" icon="o-wifi" link="####"  />
            <x-menu-item title="xxxxx" icon="o-archive-box" link="####" />
 </x-menu-sub>

newLaravelJoiner

2 years ago

Level 1

i found solution but not beatiful. can do any else?

<script>
    let submenu = document.querySelector("summary")
    console.log(submenu);
     setTimeout(() => {
        submenu.click()
     }, 500);
</script>

robsontenorio

2 years ago

Best Answer

Level 14

You can force it open with this special class placed on any children menu.

class="mary-active-menu"

<x-menu-sub title="Settings" icon="o-cog-6-tooth">
      <x-menu-item title="Wifi" icon="o-wifi" class="mary-active-menu" />
      <x-menu-item title="Archives" icon="o-archive-box" />
</x-menu-sub>

This is not documented because it is not a recommend approach. It really depends what design you intend with this.

Tip: Open a GitHub "question" issue, so more people can help you. https://github.com/robsontenorio/mary

1 like

Please or to participate in this conversation.