Before you query for categories, let's use a basic template approach for dynamically adding category menu items. There are a number of ways to do templating; in this instance, you use a simple regex string formatting approach:

1. Add the HTML template for the dynamically added category menu items to index.html:

<script type="text/template" data-template="menu-item">
  <li
    class="${className}"
    categoryName="${name}"
  >
    ${name}
  </li>
</script>

2. Add the relevant CSS to app.css:

#menu {
    border: 0;
    padding-left: 10px;
}

.ui-menu:after {
    content: "";
    display: block;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.ui-menu .ui-menu-item {
    display: inline-block;
    float: left;
    width: auto;
}

.ui-menu {
    margin: 0;
    padding: 0;
}

.ui-menu-item {
    border: 1px solid black;
    padding: 2px 5px 2px 5px;
}

.ui-menu-item:hover {
    background-color: lightgray;
}

.menu-selected {
    background-color: bisque;
}