Navigation is key in any website or web application.
To build a horizontal menu with ink start with a block-level element and use the ink-navigation
class. We prefer to use a <nav>
tag to wrap our navigation items, but a <div>
will do just fine.
The menu itself is built with a unordered list with the menu
and horizontal
classes. Adding color is as simple as adding a class to the menu list element. Available classes are grey
, green
, blue
, red
, orange
and black
!
Note: The menu can be built in many different ways, using <a>
, <ul>
or the new HTML5 tag <nav>
<nav class="ink-navigation"> <ul class="menu horizontal grey"> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div>
<ul>
(Unsorted Lists) based menus may have submenus respecting the following structure:
<nav class="ink-navigation"> <ul class="menu horizontal grey"> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li> <a href="#">Item</a> <ul class="submenu"> <li><a href="#">SubItem</a></li> <li><a href="#">SubItem</a></li> </ul> </li> </ul> </nav>
Vertical menus are built exactly the same way as the horizontal ones, just use the <ul>
with the .vertical
class. The same goes for the submenus.
<nav class="ink-navigation"> <ul class="menu vertical"> <li><a href="#">Item</a></li> ... <li> <a href="#">Item</a> <ul class="submenu"> <li><a href="#">SubItem</a></li> ... </ul> </li> </ul> </nav>
Paginations can be created by adding the pagination
class to a list inside an ink-navigation
parent. The .active
and .disabled
classes are available to diferentiate the current page and disabled links.
<nav class="ink-navigation"> <ul class="pagination"> <li class="disabled previous"><a href="#">Previous</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li class="active"><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li class="next"><a href="#">Next</a></li> </ul> </nav>
Pills can be created by adding the pagination
class to a list inside an ink-navigation
parent. The .active
and .disabled
classes are available.
<nav class="ink-navigation"> <ul class="pills"> <li><a href="#">Item</a></li> <li class="active"><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </nav>
Breadcrumbs can be created by adding the breadcrumbs
class to a ink-navigation
list. The active
and disabled
classes are available.
<nav class="ink-navigation"> <ul class="breadcrumbs"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Category</a></li> <li class="active"><a href="#">Current item</a></li> </ul> </nav>
Info a separator is automatically added.
If, by any chance, you'd like to use a different separator character (like *
) feel free to drop this into your CSS:
.ink-navigation .breadcrumbs li:after { content: '*'; }
Cascading FTW!