Menu bar

Paste the following code into the head section of your site’s HTML.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>

<link rel="stylesheet" type="text/css" href="src/lib/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="src/ax5ui-menu/dist/ax5menu.css">
<script type="text/javascript" src="src/ax5ui-menu/dist/ax5menu.js"></script>

HTML

<div id="attachedMenu-target" style="height:36px;background: #eee;border-bottom:1px solid #ccc;border-top:1px solid #ccc;padding: 0px 20px;"></div>

JS

<script type="text/javascript">
    var menu = new ax5.ui.menu({
        theme: 'primary',
        direction: "top",
        offset: {left: 0, top: 1},
        position: "absolute",
        icons: {
            'arrow': '<i class="fa fa-caret-right"></i>'
        },
        items: [
            {
                icon: '<i class="fa fa-archive"></i>',
                label: "Menu Parent 0",
                items: [
                    {
                        check: {
                            type: 'checkbox',
                            name: 'A',
                            value: '0',
                            checked: false
                        },
                        label: "Menu Z",
                        data: {},
                        role: "",
                        accelerator: "CmdOrCtrl+Z"
                    },
                    {
                        check: {
                            type: 'checkbox',
                            name: 'A',
                            value: '1',
                            checked: true
                        },
                        label: "Menu A",
                        data: {},
                        role: ""
                        //accelerator: "CmdOrCtrl+A"
                    }
                ]
            },
            {
                icon: '<i class="fa fa-mixcloud"></i>',
                label: "Menu Parent 1",
                items: [
                    {
                        label: "Menu Z",
                        data: {},
                        role: "",
                        //accelerator: "CmdOrCtrl+Z",
                        items: [
                            {
                                label: "Menu Z",
                                data: {},
                                role: ""
                                //accelerator: "CmdOrCtrl+Z"
                            },
                            {
                                label: "Menu A",
                                data: {},
                                role: ""
                                //accelerator: "CmdOrCtrl+A"
                            }
                        ]
                    },
                    {
                        label: "Menu A",
                        data: {},
                        role: ""
                        //accelerator: "CmdOrCtrl+A"
                    }
                ]
            }
        ]
    });

    menu.onStateChanged = function () {
        console.log(this);
    };
    menu.onClick = function () {
        console.log(this);
    };

    $(document.body).ready(function () {
        menu.attach($("#attachedMenu-target"));
    });
</script>