Ember modyfi object's property in action

The problem is that i would like to have two level menu. Second level for each menu element will be shown after click.If you click again it should hide submenus. So i thought i can do this by toggling CSS class on first level menu elements.

Component.js - so far i want to have 2 main menu elements.

menus: [{
            'name': 'Dashboard',
            'icon': 'dashboard',
            'active': false,
            submenus: [{
                ...
            }]
        },
        {
            'name': 'Settings',
            'icon': 'cloud',
            'active': false,
            submenus: [{
                 ...
            }], 
        }
    ],

And in template i am dynamically generating HTML elements. i've bound active property with class, so if it change in component.js it should affect CSS class.

{{#each menus as |menu|}}
        <li class="collapsible" {{bind-attr class="menu.active:active"}} {{action 'toggle' menu}}>
            <a ><span class="glyphicon glyphicon-{{menu.icon}}"></span>{{menu.name}}</a>
            <ul>


   {{#each menu.submenus as |submenu|}}
            {{#link-to submenu.route activeClass="selected" tagName="li"}}
            <a href=""><{{submenu.name}}</a>
        {{/link-to}}
        {{/each}}
        </ul>
    </li>
{{/each}}

So at the end i define simple action for toggling active parameters of first level menus.

actions: {
        toggle: function(menu) {
            this.toggleProperty(menu.active);
            }
        }

But with it says that i haven't specified element as string. And if i change it to menu.toggleProperty('actve') it says that toggleProperty is not a function. Can you advice me? Thanks