DynamicMenu.ux

<App>
    <Font ux:Global="Linearicons" File="Linearicons-Free.ttf" />

    <Panel>
      <JavaScript>
        var Observable = require('FuseJS/Observable');

        var menuItems = [{
          "title": "Menu Item 01",
          "icon": "\ue82e", // Basket
          "goto": "goItem1"
        }, {
          "title": "Menu Item 02",
          "icon": "\ue82a", // User
          "goto": "goItem2"
        }, {
          "title": "Menu Item 03",
          "icon": "\ue844", // Sent
          "goto": "goItem3"
        }, {
          "title": "Menu Item 04",
          "icon": "\ue820", // Logout
          "goto": "goItem4"
        }];

        function clone(obj) {
          return JSON.parse(JSON.stringify(obj));
        }

        function itemClicked(arg) {
          console.dir(arg.data);
        }

        module.exports = {
            menuItems: menuItems,
            getMenuItems: function () { return clone(menuItems); },
            itemClicked: function (arg) { console.dir(arg.data); }
        }
      </JavaScript>

      <Grid ux:Class="MenuGrid" Background="White" Columns="3*,29*" ColumnCount="3" Padding="20,20">
        <string ux:Property="MenuIcon" />
        <string ux:Property="MenuText" />

        <Text Font="Linearicons" FontSize="25" Value="{Property this.MenuIcon}" Clicked="{itemClicked}" Alignment="CenterLeft" />
        <Text FontSize="18" Margin="15,0,0,0" Value="{Property this.MenuText}" Clicked="{itemClicked}" Alignment="CenterLeft" TextAlignment="Right" TextWrapping="Wrap" />
      </Grid>

      <StackPanel>
        <Each Items="{menuItems}">
          <MenuGrid Margin="0,5,0,0" MenuText="{title}" MenuIcon="{icon}" />
        </Each>
      </StackPanel>

    </Panel>
</App>