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.
{
"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
}
]
}
]
}
{
"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