_activeComponentId = 'demoMenu'; .menu-tree-demo .sidebar { display: flex; } .menu-tree-demo .sidebar > div { min-width: 200px; } .menu-tree-demo .menu .item-group nav a.button.theme .content-holder { padding-left: 0px !important; }

Menu Tree

The same Menu component, configured as a vertical, always-expanded tree instead of a dropdown, useful for sidebar navigation. Items can still be split-button items combining a click action with their own submenu.

Try it

The Button referenced via buttonId only exists because this demo makes the menu button's appearance configurable, it's not required otherwise. It's rendered directly rather than used as a one-time settings prototype, so changing Primary or Decoration re-renders it live and its own onPostRender tells the menu to re-render too so its item buttons pick up the change. Security demonstrates a split button, two independent click targets, a command side and an expand arrow.

Component demos show every property used in the settings panel, even at default values, so you can see exactly what's being configured. Bindary's data binding updates the component live when a setting changes; that mechanism isn't covered here, see Bindary for how it works.

Usage

The HTML and JavaScript tabs build the identical setup shown above, declaratively via attributes or imperatively via the JS API. horizontalRoot="false" and itemGroupStyle="position: static;" together are what turn the dropdown into an always-visible, vertically stacked tree.

<a id="demoMenuButton"
   ui-type="Button"
   ui-decoration="1"></a>
<div id="demoMenu"
     ui-type="Menu"
     ui-horizontal-root="false"
     ui-item-group-style="position: static;"
     ui-button-id="demoMenuButton"
     ui-item-list='[
    { 
        "id": "account", "text": "Account", "expandOnSelect": false, "expanded": true, 
        "itemList": [
            { 
                "id": "account_profile", "text": "Profile" 
            },
            { 
                "id": "account_security", "text": "Security", "selectable": true, 
                "expandOnSelect": false, "itemList": [
                    { "id": "account_security_2fa", "text": "Two-Factor Auth" },
                    { "id": "account_security_sessions", "text": "Sessions" }
                ] 
            }
        ]
    },
    {
        "id": "billing", "text": "Billing", "itemList": [
            { "id": "billing_invoices", "text": "Invoices" },
            { "id": "billing_payment", "text": "Payment Methods" }
        ]
    }
]'></div>

const menuButton = $UI.createComponent(componyx.UI.Button, {
    id: 'demoMenuButton',
    decoration: 1,
    containerElement: document.body
});
menuButton.show();

const menuTree = $UI.createComponent(componyx.UI.Menu, {
    id: 'demoMenu',
    horizontalRoot: false,
    itemGroupStyle: 'position: static;',
    buttonId: menuButton.id,
    itemList: [
        { id: 'account', text: 'Account', expandOnSelect: false, expanded: true, itemList: [
            { id: 'account_profile', text: 'Profile' },
            { 
                id: 'account_security', text: 'Security', selectable: true, 
                expandOnSelect: false, itemList: [
                    { id: 'account_security_2fa', text: 'Two-Factor Auth' },
                    { id: 'account_security_sessions', text: 'Sessions' }
            ] }
        ] },
        { id: 'billing', text: 'Billing', itemList: [
            { id: 'billing_invoices', text: 'Invoices' },
            { id: 'billing_payment', text: 'Payment Methods' }
        ] }
    ],
    containerElement: document.body
});

menuTree.show();

Changing primary or decoration on an already-rendered Button doesn't update its appearance on its own, the styling is applied at render time. Since the tree's item buttons take their appearance from this Button, re-render it, then re-render the tree so its items pick up the change: