DAHLIA Pattern Library

Nav Mobile 

<ul class="nav-mobile">
    <li class="has-icon">
        <a href="#">
      <span class="ui-icon ui-static ui-medium i-color ">
        <svg>
          <use xlink:href="#i-browse"></use>
        </svg>
      </span>
    Browse Properties</a>
    </li>
    <li class="has-icon">
        <a href="#">
      <span class="ui-icon ui-static ui-medium i-color ">
        <svg>
          <use xlink:href="#i-assistance"></use>
        </svg>
      </span>
    Get Assistance</a>
    </li>
    <li class="has-icon">
        <a href="#">
      <span class="ui-icon ui-static ui-medium i-color ">
        <svg>
          <use xlink:href="#i-favorite"></use>
        </svg>
      </span>
    My Favorites</a>
    </li>
    <li class="has-icon">
        <a href="#">
      <span class="ui-icon ui-static ui-medium i-color ">
        <svg>
          <use xlink:href="#i-eligibility"></use>
        </svg>
      </span>
    Eligibility Settings</a>
    </li>
    <li class="has-icon">
        <a href="#">
      <span class="ui-icon ui-static ui-medium i-color ">
        <svg>
          <use xlink:href="#i-settings"></use>
        </svg>
      </span>
    Account Settings</a>
    </li>
    <li class="">
        <a href="#">
    Sign Out</a>
    </li>
</ul>
 
<ul class="nav-mobile">
  {{#each menus.mobile}}
  <li class="{{#if icon}}has-icon{{/if}}">
    <a href="#">
    {{#if icon}}
      {{> @icons-base }}
    {{/if}}
    {{this.name}}</a>
  </li>
  {{/each}}
</ul>
 
{
  "menus": {
    "account": [
      {
        "name": "My Dashboard",
        "icon": "profile"
      },
      {
        "name": "My Applications",
        "icon": "application"
      },
      {
        "name": "My Favorites",
        "icon": "favorite"
      },
      {
        "name": "Eligibility Settings",
        "icon": "eligibility"
      },
      {
        "name": "Account Settings",
        "icon": "settings"
      },
      {
        "name": "Sign Out"
      }
    ],
    "mobile": [
      {
        "name": "Browse Properties",
        "icon": "browse"
      },
      {
        "name": "Get Assistance",
        "icon": "assistance"
      },
      {
        "name": "My Favorites",
        "icon": "favorite"
      },
      {
        "name": "Eligibility Settings",
        "icon": "eligibility"
      },
      {
        "name": "Account Settings",
        "icon": "settings"
      },
      {
        "name": "Sign Out"
      }
    ],
    "lang": [
      {
        "name": "English",
        "active": true,
        "url": "application-expect.html",
        "selected": true,
        "index": null,
        "id": "panel1"
      },
      {
        "name": "Español",
        "url": "application-expect--es.html",
        "selected": null,
        "index": -1,
        "id": "panel2"
      },
      {
        "name": "中文",
        "chinese": true,
        "url": "application-expect--zh.html",
        "selected": null,
        "index": -1,
        "id": "panel3"
      },
      {
        "name": "Filipino",
        "url": "#",
        "selected": null,
        "index": -1,
        "id": "panel4"
      }
    ]
  }
}

There are no notes for this item.