Components documentation
Basic navigation
By adding the "nav" class to your unordened list, you have a basic navigation element with normalised layout that can be customised according to your needs.
Navigation orientation
By adding a "right", "left" or "bottom" class to your navigation element, you can change its orientation.
- Normal item
- Active item
- Disabled item
- Another normal item
- Normal item
- Active item
- Disabled item
- Another normal item
- Normal item
- Active item
- Disabled item
- Another normal item
Menu
By adding a "menu" class to the navigation element's wrapper, you get a basic menu.
Links menu
By adding a "links" class to the navigation element, your menu becomes a menu of ordinary links. This same technique can be used to override the default styling for menus or other navigation elements with your custom code.
Menu stats
By adding a "stats" class to the navigation element, you get a special menu type that can be used eg. for displaying stats.
Tree nav
Cascade framework supports a tree navigation as well. Using the JS features of the framework, it also supports collapsing.
Folder tree
The tree navigation can be used to implement OS style folder trees.
Menu tree
A menu tree combines menu navigation with tree navigation.
Tabs
By adding a "tabs" class to the navigation element's wrapper, you get a basic tab navigation element.
Notice that this element has a default width of 100% and thus the "tabs" class shouldn't be used on markup that
has a margin.
If you use Cascade Framework's JS, well-defined tabs are automaticly enabled.
- Normal item
- Active item
- Disabled item
- Another normal item
- Normal item
- Active item
- Disabled item
- Another normal item
- Normal item
- Active item
- Disabled item
- Another normal item
Gallery
By adding a "gallery" class to the navigation element's wrapper, you get a basic gallery element.
Tags
By adding a "tags" class to the navigation element's wrapper, you get a basic tag navigation element. It has a basic normalised markup.
Cloud tags
By adding a "cloud" class to the navigation element, your tag navigation elements become cloud tags. Five different sizes are supported out of the box.
Block tags
By adding a "blocks" class to the navigation element, your tag navigation elements become button-like tags.
Pipes
By adding a "pipes" class to the navigation element's wrapper, you get a basic pipes navigation element. The pipes element can contain regular text items along with nav items.
Pipe stats
The "pipes" nativation element can also be used as an equivalent to the menu stats.
Pagination
The "pagination" nativation element can be used for simple pagination.