Search code examples
angulartreeviewadminlte

AdminLTE - data-widget="tree" - Open menu by default

I'm using AdminLTE in a Angular 4 Application.

I have links on the left menu, I used data-widget="tree" to display the left menu.

It looks like this when it is open:

enter image description here

And like this when it's closed:

enter image description here

I want to menu to be open by default when the page is loaded, I can't find an option for this in the documentation

One solution I can think of is to trigger a click from the component at component initialization but I don't know how I can achieve this as I can't dynamically generate template reference variables.

Solution

  • I know this is an old question, but I had the same problem. I tried many of the provided solutions, but none of them worked for me. Maybe because I switched to AdminLTE 2.4.x and now the javascript based solutions don`t work anymore.

    Here is a simple approach based only on CSS and some manipulation on the HTML code. But it opens a specific treeview menu on load and leaves the functionality of the tree.js plugin.

    First: Provide a new custom CSS class like this ...

    .treeview-menu-visible {
    display: block;
}

    Second: Manipulate the HTML template like this ...

    You have to add the class "menu-open" to the "treeview" list element and the "treeview-menu" list. Then you add your custom CSS class additionally to the "treeview-menu" list.

    <ul class="sidebar-menu" data-widget="tree">
    <li class="header">Headline</li>
        <li class="treeview menu-open">
            <a href="#">
                <i class="fa fa-search"></i><span>Search</span>
                <span class="pull-right-container">
                    <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
            <ul class="treeview-menu menu-open treeview-menu-visible">
                <li><a href="#"><i class="fa fa-user"></i> Example</a></li>
                <li><a href="#"><i class="fa fa-lock"></i> Example</a></li>
            </ul>
        </li>
    </li>
</ul>

    The advantage of this method is that you can choose specific submenues to be open on load, while many other solutions open all submenues at once. Hope this helps someone ...