ux-off-canvas

Off-canvas menus are positioned outside of the viewport and slide in when activated. Setting up an off-canvas layout in Foundation is super easy.

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


Use Cases Manifest
Use case: data-driven example
    {{#events.uxOffCanvas_61}}
  • {{this}}
  • {{/}}

	{
     "title": "UX Off Canvas Data Demo",
     "expandedState": "",
     "leftItems": [
         {
             "label": "Learn More"
         },
         {
             "label": "Home",
             "href": "."
         },
         {
             "label": "интернационализация",
             "href": "."
         },
         {
             "label": "Data",
             "href": "data.html"
         },
         {
             "label": "Demo",
             "href": "demo.html"
         },
         {
             "label": "External Links"
         },
         {
             "label": "Foundation docs",
             "href": "http://foundation.zurb.com/docs/"
         },
         {
             "label": "RactiveJS docs",
             "href": "http://docs.ractivejs.org/latest/get-started",
             "target": "_blank"
         }
     ],
     "rightItems": [
         {
             "label": "Asimov's Works"
         },
         {
             "label": "Recommended order",
             "href": "http://scifi.stackexchange.com/questions/39669/what-is-the-correct-order-for-reading-material-of-isaac-asimov"
         }
     ],
     "mainContent": "

Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.

Lorem ipsum dolor.

Lorem ipsum dolor.

Lorem ipsum dolor.

Lorem ipsum dolor.

" }

Semantic Data Model
title - The text to display on the ux-off-canvas component
expandedState - left, right or empty string
leftItems - Array of nav items for the LHS
rightItems - Array of nav items for the RHS
mainContent - HTML string with component's contents.