bemhtml an block `menu`

kg-menu.bemhtml

block('kg-menu')(
    content()(function(){
        return [
            this.ctx.button || { elem: 'button' },
            { elem: 'menu', content: this.ctx.content }
        ];
    }),
    elem('menu').def()(function(){
        var self = apply('self');
        return applyCtx({
            block: 'aperture',
            mix: apply('self'),
            content: {
                block: 'menu',
                mods: {
                    disabled: true,
                    fix: 'scroll'
                },
                mix: this.extend(
                    apply('self'),
                    { elem: 'items'}),
                content: this.ctx.content
            }
        });
    })
);
match(function() {
    return this.ctx.mix && (this.ctx.mix.block === 'kg-menu');
})(
    block('menu-item').tag()('li'),
    block('menu').elem('group').tag()('ul'),
    block('menu').tag()('nav')
);

kg-menu.bemtree

block('kg-menu')(
    def()(function(){
        return applyCtx({
            block: 'kg-menu',
            js: true,
            content: applyCtx([
                {
                    block: this.block,
                    elem: 'group',
                    elemMods: { type: 'main', lvl: 0 },
                    content: this.ctx.items
                },
                {
                    block: this.block,
                    elem: 'group',
                    elemMods: { type: 'system', lvl: 0 },
                    content: this.ctx.systemItems
                }
            ])
        });
    }),

    elem('group').def()(function(){
        var lvl = this.ctx.elemMods.lvl;

        if (this.ctx.content)
        // transform content to flat array
            var content = [].concat.apply([], this.ctx.content.map(function(item, i){
                // item could be just a string
                if (this.isSimple(item))
                    item = { title: item };

                item = this.extend(item, {
                    block: 'kg-menu',
                    elem: 'item',
                    // use title as value if not set
                    value: item.value || item.title,
                    // item can have own mods defined
                    // add 'lvl' elemMod
                    elemMods: this.extend(item.elemMods, { lvl: lvl })
                });

                // default icon for items 'main' group
                if (this.ctx.elemMods && this.ctx.elemMods.type === 'main' &&
                    (!(item.glyph || item.iconUrl || item.iconCls)))
                    item.glyph = 'blank';

                if (item.content && item.content.length) {
                    // set mod to link item with group of subitems
                    item.elemMods = this.extend(item.elemMods, {
                        sub: true,
                        id: i
                    });

                    var group = {
                        block: 'kg-menu',
                        elem: 'group',
                        elemMods: {
                            id: i,
                            lvl: lvl*1 + 1
                        },
                        content: item.content
                    };

                    delete item.content;

                    item = [item, group];
                }

                return item;
            }, this));

        return applyCtx({
            block: 'menu',
            elem: 'group',
            mix: apply('self'),
            content: content
        });
    }),

    elem('item').def()(function(){
        var item = {
            block: 'menu-item',
            mods: {
                disabled: true,
                type: this.ctx.url? 'link' : null
            },
            // mix: this.ctx.url? null : apply('self'),
            mix: apply('self'),
            attrs: this.ctx.attrs,
            val: this.ctx.value,
            content: this.ctx.title
        };

        // TODO: rewrite with applyNext
        if (this.ctx.iconUrl || this.ctx.iconCls || this.ctx.glyph)
            item.content = [
                {
                    block: 'icon',
                    url: this.ctx.iconUrl || null,
                    cls: this.ctx.iconCls || null,
                    content: this.ctx.glyph || null
                },
                {
                    tag: 'span',
                    content: item.content
                }
            ];

        if (this.ctx.url)
            item.content = {
                block: 'link',
                // mix:  apply('self'),
                url: this.ctx.url,
                content: item.content
            };

        return item;
    })
);

menu.data.bemjson

({
    block: 'kg-menu',
    items: [],
    systemItems: []
})

menu.vies.bemjson

{
    "block": "kg-menu",
    "js": true,
    "content": [
    {
        "block": "menu",
        "elem": "group",
        "mix": {
            "block": "kg-menu",
            "elem": "group",
            "mods": {},
            "elemMods": {
                "type": "main",
                "lvl": 0
            }
        },
        "content": [
            {
                "block": "menu-item",
                "mods": {
                    "disabled": true,
                    "type": null
                },
                "mix": {
                    "block": "kg-menu",
                    "elem": "item",
                    "mods": {},
                    "elemMods": {
                        "lvl": 0,
                        "sub": true,
                        "id": 0
                    }
                },
                "val": "Первое",
                "content": [
                    {
                        "block": "icon",
                        "url": null,
                        "cls": null,
                        "content": "blank",
                        "mods": {}
                    },
                    {
                        "tag": "span",
                        "content": "Первое"
                    }
                ]
            },
            {
                "block": "menu",
                "elem": "group",
                "mix": {
                    "block": "kg-menu",
                    "elem": "group",
                    "mods": {},
                    "elemMods": {
                        "id": 0,
                        "lvl": 1
                    }
                },
                "content": [
                    {
                        "block": "menu-item",
                        "mods": {
                            "disabled": true,
                            "type": null
                        },
                        "mix": {
                            "block": "kg-menu",
                            "elem": "item",
                            "mods": {},
                            "elemMods": {
                                "lvl": 1
                            }
                        },
                        "val": "Раз — ромашка",
                        "content": "Раз — ромашка"
                    },
                    {
                        "block": "menu-item",
                        "mods": {
                            "disabled": true,
                            "type": null
                        },
                        "mix": {
                            "block": "kg-menu",
                            "elem": "item",
                            "mods": {},
                            "elemMods": {
                                "lvl": 1
                            }
                        },
                        "val": "Два — ромашка",
                        "content": "Два — ромашка"
                    }
                ],
                "mods": {}
            },
            {
                "block": "menu-item",
                "mods": {
                    "disabled": true,
                    "type": "link"
                },
                "mix": {
                    "block": "kg-menu",
                    "elem": "item",
                    "mods": {},
                    "elemMods": {
                        "lvl": 0
                    }
                },
                "val": "Десертик",
                "content": {
                    "block": "link",
                    "url": "#/1",
                    "content": [
                        {
                            "block": "icon",
                            "url": null,
                            "cls": "fa fa-birthday-cake",
                            "content": null,
                            "mods": {}
                        },
                        {
                            "tag": "span",
                            "content": "Десертик"
                        }
                    ],
                    "mods": {}
                }
            }
        ],
        "mods": {}
    },
    {
        "block": "menu",
        "elem": "group",
        "mix": {
            "block": "kg-menu",
            "elem": "group",
            "mods": {},
            "elemMods": {
                "type": "system",
                "lvl": 0
            }
        },
        "content": [
            {
                "block": "menu-item",
                "mods": {
                    "disabled": true,
                    "type": null
                },
                "mix": {
                    "block": "kg-menu",
                    "elem": "item",
                    "mods": {},
                    "elemMods": {
                        "lvl": 0
                    }
                },
                "val": "Настройки",
                "content": [
                    {
                        "block": "icon",
                        "url": null,
                        "cls": null,
                        "content": "cog",
                        "mods": {}
                    },
                    {
                        "tag": "span",
                        "content": "Настройки"
                    }
                ]
            }
        ],
        "mods": {}
    }]
}