• InK
  • Layout
  • Navigation
  • Typography
  • Icons
  • Forms
  • Alerts
  • Tables
  • InK JS
    • UI
    • Core

Navigation

Navigation is key in any website or web application.

  • Back to Top
  • Horizontal menu
  • Vertical menu
  • Pagination
  • Pills
  • Breadcrumbs

Horizontal menu

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!

  • Item
  • Item
  • Item
  • Item
  • Submenu
    • Item with a very big title
    • Item
    • Item

Using the color classes on ink menus

  • Item
  • Item
  • Item
  • Item
  • Submenu
    • Item with a very big title
    • Item
    • Item
  • Item
  • Item
  • Item
  • Item
  • Submenu
    • Item with a very big title
    • Item
    • Item
  • Item
  • Item
  • Item
  • Item
  • Submenu
    • Item with a very big title
    • Item
    • Item
  • Item
  • Item
  • Item
  • Item
  • Submenu
    • Item with a very big title
    • Item
    • Item
  • Item
  • Item
  • Item
  • Item
  • Submenu
    • Item with a very big title
    • Item
    • Item
  • Item
  • Item
  • Item
  • Item
  • Submenu
    • Item with a very big title
    • Item
    • Item

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>

Submenu

<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 menu

  • Suspendisse
  • Vivamus
  • Condimentum
  • Ccommodo
  • Egestas
  • Submenu
    • Item with a very big title
    • Item
    • Item

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>

Pagination

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.

Example

  • Previous
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • Next
<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

Pills can be created by adding the pagination class to a list inside an ink-navigation parent. The .active and .disabled classes are available.

example

  • Item
  • Item
  • Item
  • Item
<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

Breadcrumbs can be created by adding the breadcrumbs class to a ink-navigation list. The active and disabled classes are available.

  • Home
  • Products
  • Category
  • Current item
<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.

Customizing the separator

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!

  • About
  • Changelog
  • Ink's code licensed under MIT, docs under cc-by-nc
sapo.pt

PTC logoPTC - All rights reverved.
SAPO is a trademark and a search engine created at the University of Aveiro.

    Follow SAPO: