Navigation - Foundation Framework Elements

Navigation in Foundation Framework includes pagination, Side nav, Sub nav, Top bar and Breadcrumbs.

1. Off-canvas

Off canvas menu is placed outside of the viewport and its slide will be displayed when activate it.

  • Off-canvas-wrap - contains entire off-canvas layout and it hides overflows.
  • Inner-wrap - page content placed inside inner-wrap.
  • Off-canvas-menu - It is slide panel that can be placed either left side or right side of the view port.
  • Left-off-canvas-toggle - targets left side menu.
  • Right-off-canvas-toggle - targets right side menu.
  • Exit-off-canvas - deactivates off-canvas menu.
  • Tab-bar - It is simple navigation pattern.
2. Icon Bar

Icon bar offers a menu to quickly navigate a page through icons. It allows you to create horizontal and vertical menu.

3. Side Nav

Side nav, like you will see on our main site, is useful for sections of either a site or a page.

4. Magellan Sticky Nav

Magellan sticky nav creates fixed position navigation which helps user to find where they are on a page without scrolling.

5. Sub Nav

Sub nav used to move between different states of pages.

6. Breadcrumbs

Breadcrumbs shows navigation trail for user clicking through site.

7. Pagination

Pagination is moving between pages with the advent of longer pages using AJAX coding. It can useful for long, repititive content.

Example for Off-canvas
		
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
  <section class="left-small">
    <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
  </section>
  <section class="middle tab-bar-section">
    <h1 class="title">Foundation</h1>
  </section>
  <section class="right-small">
    <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
  </section>
</nav>
<aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">Gird</a></li>
        <li><a href="#">Off-canvas</a></li>
        <li><a href="#">Interchange</a></li>
        <li><a href="#">Accordion</a></li>
        <li><a href="#">Orbit Slider</a></li> 
      </ul>
</aside>
<aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">Gird</a></li>
        <li><a href="#">Off-canvas</a></li>
        <li><a href="#">Interchange</a></li>
        <li><a href="#">Accordion</a></li>
        <li><a href="#">Orbit Slider</a></li> 
      </ul>
    </aside>
<section class="main-section">
<h5>Grid System</h5>
<p>Foundation grid increased and decreased based on the browser width. Bootstrap has set of pre-defined grid sizes for screens and main devices. It will suddenly change the grid size while you resizing the browser width. Foundation will adapt its grid to the current browser. Both grid systems have all of the advanced features such as nesting, offsets and pushing/pulling.
Bootstrap grid use 12 columns making for a 940 px wide container without responsive. If responsive feature added, the grid adapts to be 724 px and 1170 px wide based on view port. The zurb foundation grid specify width each column with the small, medium and large.</p>
</section>
<a class="exit-off-canvas"></a>
<div>
<div>

Grid System

Foundation grid increased and decreased based on the browser width. Bootstrap has set of pre-defined grid sizes for screens and main devices. It will suddenly change the grid size while you resizing the browser width. Foundation will adapt its grid to the current browser. Both grid systems have all of the advanced features such as nesting, offsets and pushing/pulling. Bootstrap grid use 12 columns making for a 940 px wide container without responsive. If responsive feature added, the grid adapts to be 724 px and 1170 px wide based on view port. The zurb foundation grid specify width each column with the small, medium and large.

Orbit Slider

Orbit slider is used for creating responsive image or content slider with easy and efficient manner. By using orbit, the user can swipe on touch enabled devices. It use foundation.orbit javascript file. If you need to use orbit element to your website, you will add following codes only.


Next Lesson > Foundation Form