ux-top-bar

The Foundation Top Bar gives you a great way to display a complex navigation bar on small, medium or large screens.

Read Foundation's topbar.html docs for more details.

NOTE: Not complete functionality.


Use Cases Manifest contain-to-grid modesticky top bartemplate example
    {{#events.uxTopBar_90}}
  • {{this}}
  • {{/}}

	{
    "class": "contain-to-grid",
    "title": "Test Title",
    "menulabel": "Menu",
    "dataoptions": "",
    "leftitems": [
        {
            "label": "Left Button",
            "href": "#"
        }
    ],
    "rightitems": [
        {
            "label": "Right Button Active",
            "href": "#r1",
            "active": true
        },
        {
            "label": "Right nesting",
            "href": "#r2",
            "items": [
                {
                    "label": "First link in dropdown",
                    "href": "#r21"
                },
                {
                    "label": "Second link with items",
                    "items": [
                        {
                            "label": "nested item 1",
                            "href": "#r221"
                        },
                        {
                            "label": "nested item 2",
                            "href": "#r222"
                        },
                        {
                            "label": "nested item 3",
                            "href": "#r223"
                        }
                    ]
                },
                {
                    "label": "Active link in dropdown",
                    "href": "#r23",
                    "active": true
                }
            ]
        }
    ]
}
    {{#events.uxTopBar_91}}
  • {{this}}
  • {{/}}

	{
    "class": "contain-to-grid",
    "issticky": true,
    "title": "",
    "href": ".",
    "menulabel": "Menu",
    "dataoptions": "",
    "leftitems": [
        {
            "label": "Responsive Web",
            "href": ".",
            "items": [
                {
                    "label": "TV",
                    "href": "."
                },
                {
                    "label": "Mobile Apps",
                    "href": "."
                }
            ]
        }
    ],
    "rightitems": [
        {
            "label": "Overview",
            "href": "/pages",
            "active": true
        },
        {
            "label": "Style",
            "href": "/pages/web-responsive/style"
        },
        {
            "label": "UI Components",
            "href": "/pages/web-responsive/style"
        },
        {
            "label": "Layout",
            "href": "/pages/web-responsive/layout"
        },
        {
            "label": "Resources",
            "href": "/pages/web-responsive/resources"
        }
    ]
}


	
		
  • Right Button Active
  • Right nesting
  • First link in dropdown
  • Second link with items
  • nested item 1
  • nested item 2
  • nested item 3
  • Active link in dropdown
  • Left Button

  • Semantic Data Model
    class - Class for the top bar wrapper
    issticky - Activate sticky mode
    title - Leading text to display on the ux-off-canvas component
    href - Link for your title
    menulabel - Label for the menu button
    leftitems - Array of nav items for the left hand side of the top bar
    rightitems - Array of nav items for the right hand side of the top bar
    dataoptions - Array of options like as outlined in Foundation top bar documentation (dropdown_autoclose, is_hover, etc.)