Navigation

Navigation is key in any website or web application.

Navigation basics

As with everything else in Ink, navigation is easy to implement and quick to make flexible and responsive to various screen widths and if you know your way around natural language you'll quickly pick up on how things work.

Tip we strongly suggest you start with the basics and read the Layout section, it'll make it that much easier to get into the spirit of Ink and learn the rest.

Anatomy of a menu

A menu in Ink starts with a block-level element, such as <nav> or, if you prefer, and to keep things more compatible with older browsers, <div>.

This element needs to have the class .ink-navigation and will act as a wrapper to the whole thing.

Menus need to be lists, as that's what they are anyway and it's considered the industry standard best practice. So, inside your wrapper block put an unsorted list <ul> with the .menu class and list your menu items within <li>.

Code

<nav class="ink-navigation">
   <ul class="menu">
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
   </ul>
</nav>

Submenus

Making submenus is as simple as adding a new <ul> inside the <li> you want to control the sublist and giving it the .submenu class.

Code

<nav class="ink-navigation">
   <ul class="menu">
      <li><a href="#">Item</a></li>
      <li><a href="#">Item with a submenu</a>
        <ul class="submenu">
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
        </ul>
      </li>
   </ul>
</nav>

Navigation styling

To style the menu, we add classes to the <ul> element. First, declare it a menu, using the .menu class, then, decide what type of menu it's going to be: .horizontal and .vertical will be your primary classes, but there are others we'll describe below.

Finally, you can use utility classes for stuff like rounded corners, gradients and color.

To see code examples keep reading below for each type of menu.

Special items

Menus frequently need active and disabled items to fit most usage scenarios, so simply add the .active or .disabled classes to the list item you need to make either state. We strongly discourage you to use both in the same <li>

Available classes

.ink-navigation Takes your list and takes care of spacing, centering and building a basic menu look. Apply to parent block element, such as <nav>.
.menu further prepares the list elements and links to be styled as a menu. Apply to <ul>.
.horizontal turns your list into a horizontal menu. Apply to <ul>.
.vertical turns your list into a vertical menu. Apply to <ul>.

.flat produces a flat color background, instead of the default gradient. Apply to <ul>.
.rounded adds rounded corners. Apply to <ul>.
.shadowed adds a dropshadow. Apply to <ul>.
.grey .green .blue .red .orange and .black define the base color scheme for the menu. Apply to <ul>.
.active marks an item as active. Apply to <li>.
.disabled marks an item as disabled. Apply to <li>.

Horizontal menu

As explained in the basics, you'll need a block element containing an unsorted list to make any menu, as long as the block has the class .ink-navigation and the list has the class .menu

For the horizontal variant, we'll add the .horizontal tag to the list element.

Examples

Tip If you see one you like, grab the code from your inspector.

Code

<nav class="ink-navigation">
   <ul class="menu horizontal">
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
   </ul>
</nav>

Vertical menu

Vertical menus work exactly like horizontal ones, except you have to use the .vertical class on the list, instead of .horizontal

Everything else works the same way, including making submenus. Note, however that if you add the .submenu class to your sublist you get a flyout menu that extends to the right of your vertical menu. If you prefer a dropdown submenu, add the .dropdown class as well. Check the last two items of the attached orange example menu to see the difference between flyout and dropdown.

Code

<nav class="ink-navigation">
   <ul class="menu vertical">
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
   </ul>
</nav>

Pagination

To create a pagination-style navigation, you need to keep your parent .ink-navigation and instead of declaring your ul with the .menu class, use the .pagination class. Pagination elements are always horizontal, so don't bother with the orientation classes.

There are two special classes for pagination elements and those are the .previous and .next classes. Just add them to your first and last li elements and make sure they contain links to navigate backward and forward in your page list. The classes will create a cap effect at both ends of the pagination bar.

Styling classes such as .rounded .shadowed flat and the color classes, will work with pagination bars exactly like they do with other types of navigation.

Example

Code

<nav class="ink-navigation">
    <ul class="pagination">
        <li class="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="next"><a href="#">Next</a></li>
    </ul>
</nav>

Pills

Pills are just another way to show your menu items as individual little rounded boxes. If you've guessed already, you probably guessed right: just put the .pills class in your ul and you're set. Again, styling for rounded corners, shadows and colors still apply.

With a little added styling, it looks like this:

Example

Code

<nav class="ink-navigation">
    <ul class="pills">
        <li><a href="#">Pill 1</a></li>
        <li><a href="#">Pill 2</a></li>
        <li><a href="#">Pill 3</a></li>
    </ul>
</nav>

Breadcrumbs

A breadcrumb navigation can be useful if you have several levels of depth in your site and want to let your users know where they are and easily navigate to previous items in the tree. Breadcrumbs in Ink are created by adding the .breadcrumbs class to the <ul> element. Keep using all the visual classes for adding flair to your breadcrumbs, just read above about rounded corners, colors and more.

Example

Code

<nav class="ink-navigation">
    <ul class="breadcrumbs">
        <li><a href="#">Start</a></li>
        <li><a href="#">Level 1</a></li>
        <li><a href="#">Level 2</a></li>
        <li class="active"><a href="#">Current item</a></li>
    </ul>
</nav>

Note 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!

Footer menu

Footer menus are usually simple text menus with either redundant or accessory navigation. Because the default of every element in Ink is very simple, you can simply use a horizontal or vertical menu in your footer, leaving out any visual styling classes, to obtain that simple, text menu look.

Tip make sure your parent .ink-navigation element is, itself, wrapped in a <footer> element to get proper spacing.

code for an example horizontal footer menu.

<footer>
    <nav class="ink-navigation">
        <ul class="menu horizontal">
            <li><a href="#">footerItem</a></li>
            <li><a href="#">footerItem</a></li>
            ...
        </ul>
    </nav>
</footer>

Dropdowns

Dropdowns are extremely powerful and versatile. We developed a simple to implement model which works both on item click, or hover, making it work on touch devices effortlessly. Go ahead and click the dropdown button above to see what it does, and then read on to see how you can make your own.

Example Try clicking the button below to see it in action.

To begin, create a block-level element with the .ink-dropdown class. This element will wrap your entire dropdown menu: your trigger element, your menus and submenus.

<div class="ink-dropdown"></div>

Next, you need to create the trigger element, which will toggle the dropdown on and off. For the sake of semantics either use a <button> or an <a>.

The trigger element must have two important attributes: the .toggle class and a data-target set to the ID of the element you need toggled.

So, let's say you want a button that says "click me" and toggles a menu called #dropdown on and off. Here's the code:

<button class="toggle" data-target="#dropdown">Click me</button>

Next, you need the actual menu that you want toggled, so just create a <ul> with the .dropdown-menu class. Don't forget to also add the #dropdown ID to be targetted by the data-target attribute of the trigger button we created above. Essentially, still inside your .ink-dropdown, and after your .toggle button, you'll create the following:

<ul class="dropdown-menu" id="dropdown">

There you have it. Create a container for your dropdown, then add a trigger button referencing an ID on your actual menu. It will just work and you can integrate it wherever you need.

Sub menus

Creating sub menus follows the same logic. One of your <li> elements will hold a link with the .toggle class and the data-target attribute pointing to the ID of a <ul> which is also within the same <li>. You also need to add the class .submenu to the containing <li>. It will look something like this:

<li class="submenu">
    <a href="#" class="toggle" data-target="subitems">Sub-items</a>
    <ul class="dropdown-menu" id="subitems">

So, it's the same logic as before, only it's nested within a specific list element and, in this case, we used an <a> instead of a <button> as trigger.

Helper elements

To make your menus better looking, more organized and easier to use, we have some helper elements that will give you styling options for most your menu-building needs. Here's a list:

Headings - add a heading within your menu by styling an <li> with the .heading class;
Separators - create horizontal lines to separate groups of items on a menu by adding either a .separator-above or a .separator-below class to an <li>.
Disabled - add the .disabled class to an <li> containing menu text that you want to appear as disabled.

Code To help you get started we've prepared a functional code example covering all the topics explained above.

<div class="ink-dropdown">
    <button class="ink-button toggle" data-target="#dropdown">Dropdown <span class="icon-caret-down"></span></button>
    <ul id="dropdown" class="dropdown-menu">
        <li class="heading">Heading</li>
        <li class="separator-above"><a href="#">Option</a></li>
        <li><a href="#">Option</a></li>
        <li class="separator-above disabled"><a href="#">Disabled option</a></li>
        <li class="submenu">
            <a href="#" class="toggle" data-target="#submenu1">A longer option name</a>
            <ul id="submenu1" class="dropdown-menu">
                <li class="submenu">
                    <a href="#" class="toggle" data-target="#ultrasubmenu">Sub option</a>
                    <ul id="ultrasubmenu" class="dropdown-menu">
                        <li><a href="#">Sub option</a></li>
                        <li><a href="#" data-target="ultrasubmenu">Sub option</a></li>
                        <li><a href="#">Sub option</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub option</a></li>
                <li><a href="#">Sub option</a></li>
            </ul>
        </li>
        <li><a href="#">Option</a></li>
    </ul>
</div>

<div class="ink-dropdown">
 <button class="ink-button toggle" data-target="#dropdown">Dropdown <span class="icon-caret-down"></span></button>
  <ul id="dropdown" class="dropdown-menu">
   <li class="heading">Heading</li>
   <li class="separator-above"><a href="#">Option</a></li>
   <li><a href="#">Option</a></li>
   <li class="separator-above disabled"><a href="#">Disabled option</a></li>
   <li class="submenu">
    <a href="#" class="toggle" data-target="#submenu1">A longer option name</a>
    <ul id="submenu1" class="dropdown-menu">
     <li class="submenu">
      <a href="#" class="toggle" data-target="#ultrasubmenu">Sub option</a>
      <ul id="ultrasubmenu" class="dropdown-menu">
       <li><a href="#">Sub option</a></li>
       <li><a href="#" data-target="ultrasubmenu">Sub option</a></li>
       <li><a href="#">Sub option</a></li>
      </ul>
     </li>
     <li><a href="#">Sub option</a></li>
     <li><a href="#">Sub option</a></li>
    </ul>
   </li>
  <li><a href="#">Option</a></li>
 </ul>
</div>