# Navigation

fusionCSS makes use of JavaScript to convert horizontal or vertical navigation marked with the slideInMenu class into a menu that slides into view on demand. This functionality requires fusionCSS.js to be included.

## Horizontal Navigation

- Link
- Link
- Link
- Link

    <ul class="hnav">
    	<li><a href="#stay">Link</a></li>
    	<li class="active"><a href="#stay">Link</a></li>
    	<li><a href="#stay">Link</a></li>
    	<li><a href="#stay">Link</a></li>
    </ul>

## Horizontal Navigation (Pill)

- Link
- Link
- Link
- Link

    <ul class="hnav pill">
    	<li><a href="#stay">Link</a></li>
    	<li class="active"><a href="#stay">Link</a></li>
    	<li><a href="#stay">Link</a></li>
    	<li><a href="#stay">Link</a></li>
    </ul>

## Vertical Navigation

The vertical navigation can be automatically converted to a drop down list when the browser width falls below 768 pixels by includeing the class collapseMenu e.g. <ul class="vnav collapseMenu">.

- Link
- Link
- Link
- Link

    <ul class="vnav">
    	<li><a href="#stay">Link</a></li>
    	<li class="active"><a href="#stay">Link</a></li>
    	<li><a href="#stay">Link</a></li>
    	<li><a href="#stay">Link</a></li>
    </ul>

## Breadcrumb

Converts an unordered list item into a breadcrumb.

- Link
- Link
- Link
- Link

    <ul class="breadcrumbwidget">
    	<li><a href="#stay">Link</a></li>
    	<li><a href="#stay">Link</a></li>
    	<li><a href="#stay">Link</a></li>
    	<li>Link</li>
    </ul>

## Breadcrumb (Path)

Converts an unordered list item into a path style breadcrumb.

- Link
- Link
- Link
- Link

    <ul class="breadcrumbwidget path">
    	<li><a href="#stay">Link</a></li>
    	<li><a href="#stay">Link</a></li>
    	<li><a href="#stay">Link</a></li>
    	<li>Link</li>
    </ul>

## Breadcrumb (Section)

Converts an unordered list item into a section style breadcrumb.

- Link
- Link
- Link
- Link

    <ul class="breadcrumbwidget section">
    	<li><a href="#stay">Link</a></li>
    	<li><a href="#stay">Link</a></li>
    	<li><a href="#stay">Link</a></li>
    	<li>Link</li>
    </ul>

## Breadcrumb (Flat)

Converts an unordered list item into a flat breadcrumb.

- Link
- Link
- Link
- Link
- Current

    <ul class="breadcrumbwidget flat">
    	<li><a href="#stay">Link</a></li>
    	<li><a href="#stay">Link</a></li>
    	<li><a href="#stay">Link</a></li>
    	<li><a href="#stay">Link</a></li>
    	<li>Current</li>
    </ul>

- Link
- Link
- Link
- Link
- Current

    <ul class="breadcrumbwidget flat">
    	<li><a href="#stay">Link</a></li>
    	<li><a href="#stay">Link</a></li>
    	<li><a href="#stay">Link</a></li>
    	<li><a href="#stay">Link</a></li>
    	<li><a href="#stay">Current</a></li>
    </ul>

## Pagination

Converts an unordered list item into a pagination widget, it is designed to style the pagination widget within fusionLib.

- 1
- 2
- 3
- 4
- 5
- >
- »

    <ul class="paginationwidget">
    	<li><span>1</span></li>
    	<li><a href="#stay">2</a></li>
    	<li><a href="#stay">3</a></li>
    	<li><a href="#stay">4</a></li>
    	<li><a href="#stay">5</a></li>
    	<li><a href="#stay">></a></li>
    	<li><<a href="#stay">»</a></li>
    </ul>

## Mobile Navigation

fusionCSS can convert an unordered list into a slide out navigation menu.

Adding the class slideInMenu generates a slide out menu from the list.

For a slide in menu an element with an id of viewSlideInMenu is required, when the user clicks this element the slide in menu is displayed.

- Menu Item 1
- Menu Item 2
- Menu Item 3

    <ul class="hnav pill slideInMenu">
    	<li><a href="#stay">Menu Item 1</a></li>
    	<li><a href="#stay">Menu Item 2</a></li>
    	<li><a href="#stay">Menu Item 3</a></li>
    </ul>

    <div id="viewSlideInMenu">MENU</div>

Top