Vertical navigation.
< nav class = " ace-nav-container" role = " navigation" >
< ul class = " ace-nav ace-nav-default" >
< li class = " ace-nav-item" > < a href = " http://example.com/" > Documents</ a> </ li>
< li class = " ace-nav-item" > < a href = " http://example.com/" > Q& A</ a> </ li>
< li class = " ace-nav-item ace-nav-active" > < a href = " http://example.com/" > Reports</ a> </ li>
< li class = " ace-nav-item" > < a href = " http://example.com/" > Manage</ a> </ li>
< li class = " ace-nav-item" > < a href = " http://example.com/" > Notifications</ a> </ li>
< li class = " ace-nav-item" > < a href = " http://example.com/" > Support</ a> </ li>
</ ul>
</ nav>
< % ace. nav_container( Array( ) )
ace. nav( Array( "type" , "default" ) )
ace. nav_item( Array( _
"href" , "http://example.com/" , _
"text" , "Documents" _
) )
ace. nav_item_end
ace. nav_item( Array( _
"href" , "http://example.com/" , _
"text" , "Q&A" _
) )
ace. nav_item_end
ace. nav_item( Array( _
"href" , "http://example.com/" , _
"text" , "Reports" , _
"active" , "true" _
) )
ace. nav_item_end
ace. nav_item( Array( _
"href" , "http://example.com/" , _
"text" , "Manage" _
) )
ace. nav_item_end
ace. nav_item( Array( _
"href" , "http://example.com/" , _
"text" , "Notifications" _
) )
ace. nav_item_end
ace. nav_item( Array( _
"href" , "http://example.com/" , _
"text" , "Support" _
) )
ace. nav_item_end
ace. nav_end
ace. nav_container_end % >
Horizontal navigation.
< nav class = " ace-nav-container" role = " navigation" >
< ul class = " ace-nav ace-nav-horizontal" >
< li class = " ace-nav-item" > < a href = " http://example.com/" > Documents</ a> </ li>
< li class = " ace-nav-item" > < a href = " http://example.com/" > Q& A</ a> </ li>
< li class = " ace-nav-item ace-nav-active" > < a href = " http://example.com/" > Reports</ a> </ li>
< li class = " ace-nav-item" > < a href = " http://example.com/" > Manage</ a> </ li>
< li class = " ace-nav-item" > < a href = " http://example.com/" > Notifications</ a> </ li>
< li class = " ace-nav-item" > < a href = " http://example.com/" > Support</ a> </ li>
</ ul>
</ nav>
< % ace. Nav_Container( Array( ) )
ace. Nav( Array( "type" , "horizontal" ) )
ace. Nav_Item( Array( _
"href" , "http://example.com/" , _
"text" , "Documents" _
) )
ace. Nav_Item_End
ace. Nav_Item( Array( _
"href" , "http://example.com/" , _
"text" , "Q&A" _
) )
ace. Nav_Item_End
ace. Nav_Item( Array( _
"href" , "http://example.com/" , _
"text" , "Reports" , _
"active" , "true" _
) )
ace. Nav_Item_End
ace. Nav_Item( Array( _
"href" , "http://example.com/" , _
"text" , "Manage" _
) )
ace. Nav_Item_End
ace. Nav_Item( Array( _
"href" , "http://example.com/" , _
"text" , "Notifications" _
) )
ace. Nav_Item_End
ace. Nav_Item( Array( _
"href" , "http://example.com/" , _
"text" , "Support" _
) )
ace. Nav_Item_End
ace. Nav_End
ace. Nav_Container_End % >
Breadcrumb navigation.
< nav class = " ace-nav-container" role = " navigation" >
< ul class = " ace-nav ace-nav-breadcrumb" >
< li class = " ace-nav-item" > < a href = " http://example.com/" > Beverages</ a> </ li>
< li class = " ace-nav-item" > < a href = " http://example.com/" > Hot</ a> </ li>
< li class = " ace-nav-item" > < a href = " http://example.com/" > Coffee</ a> </ li>
< li class = " ace-nav-item" > < a href = " http://example.com/" > Espresso</ a> </ li>
< li class = " ace-nav-item" > < span> Short Black</ span> </ li>
</ ul>
</ nav>
< % ace. Nav_Container( Array( ) )
ace. Nav( Array( "type" , "breadcrumb" ) )
ace. Nav_Item( Array( ) )
% >
< a href= "http://example.com/" > Beverages< / a>
< %
ace. Nav_Item_End
ace. Nav_Item( Array( ) )
% >
< a href= "http://example.com/" > Hot< / a>
< %
ace. Nav_Item_End
ace. Nav_Item( Array( ) )
% >
< a href= "http://example.com/" > Coffee< / a>
< %
ace. Nav_Item_End
ace. Nav_Item( Array( ) )
% >
< span> Espresso< / span>
< %
ace. Nav_Item_End
ace. Nav_End
ace. Nav_Container_End % >
Breadcrumb navigation using assets.
< nav class = " ace-nav-container" role = " navigation" >
< ul class = " ace-nav ace-nav-breadcrumb" >
< li class = " ace-nav-item" > < span class = " ace-asset ace-asset-directory" > < span class = " ace-icon ace-icon-objects-folder ace-asset-type" > </ span> < span class = " ace-asset-number" > 01</ span>
< a class = " ace-asset-name" href = " http://example.com" > Important Stuff</ a> </ span>
</ li>
< li class = " ace-nav-item" > < span class = " ace-asset ace-asset-file" > < span class = " ace-icon ace-icon-document-acrobat ace-asset-type" > </ span> < span class = " ace-asset-number" > 01.03</ span>
< span class = " ace-asset-name" > Important.pdf</ span> </ span>
</ li>
</ ul>
</ nav>
< % ace. Nav_Container( Array( ) )
ace. Nav( Array( "type" , "breadcrumb" ) )
ace. Nav_Item( Array( ) )
ace. Directory( Array( _
"name" , "Important stuff" , _
"number" , "01" , _
"href" , "http://example.com/" _
) )
ace. Nav_Item_End
ace. Nav_Item( Array( ) )
ace. File( Array( _
"name" , "Important.pdf" , _
"number" , "01.03" , _
"type" , "acrobat" , _
"href" , "http://example.com/" _
) )
ace. Nav_Item_End
ace. Nav_End
ace. Nav_Container_End % >