ux-iconbar

An Icon Bar provides a menu to quickly navigate an app. Use the Icon Bar horizontally or vertically, with the labels below the icons or to the right. Have it your way.

Read Foundation's iconbar docs for more details.


Use Cases Manifest Default iconbarLabel right
    {{#events.uxIconbar_43}}
  • {{this}}
  • {{/}}

	{
    "class": "",
    "items": [
        {
            "href": "/",
            "src": "images/fi-home.svg",
            "label": "Home"
        },
        {
            "href": "/path/to/blah",
            "src": "images/fi-bookmark.svg",
            "label": "Bookmark"
        },
        {
            "src": "images/fi-info.svg",
            "labels": false,
            "label": "Info",
            "class": "disabled"
        },
        {
            "src": "images/fi-mail.svg",
            "label": "Mail"
        },
        {
            "src": "images/fi-like.svg",
            "label": "Like"
        }
    ]
}
    {{#events.uxIconbar_44}}
  • {{this}}
  • {{/}}

	{
    "class": "label-right",
    "items": [
        {
            "href": "/",
            "src": "images/fi-home.svg",
            "label": "Home"
        },
        {
            "href": "/path/to/blah",
            "src": "images/fi-bookmark.svg",
            "labels": false,
            "label": "Bookmark"
        },
        {
            "src": "images/fi-info.svg",
            "label": "Info"
        },
        {
            "src": "images/fi-mail.svg",
            "label": "Mail",
            "class": "disabled"
        },
        {
            "src": "images/fi-like.svg",
            "label": "Like"
        }
    ]
}

Semantic Data Model
class - CSS class.
items - List of child items