0build.dev
Playground

Thumbnav

Create a flexible thumbnail navigation.

Report an IssueContexts

Table of contents

Usage

To create a navigation with thumbnails, use the following classes. This component is built with Flexbox. So to align a thumbnav, you can use utility classes.

ClassDescription
.z-thumbnavAdd this class to a <ul> element to define the Thumbnav component. Nest your thumbnail images inside <a> elements within the list.
.z-active Add this class to a list item to apply an active state.
<ul class="z-thumbnav">
  <li class="z-active">
    <a href=""><img src="" width="" height="" alt="" /></a>
  </li>
  <li>
    <a href=""><img src="" alt="" /></a>
  </li>
</ul>

Vertical alignment

The thumbnav can also be displayed vertically. Just add the .z-thumbnav-vertical modifier.

<ul class="z-thumbnav z-thumbnav-vertical">
  ...
</ul>

Position as overlay

To position the thumbnav on top of an element or the Slideshow component for example, add one of the .z-position-* classes from the Position component to a div element wrapping the thumbnav. To create a position context on the container, add the .z-position-relative class.

<div class="z-position-relative">
  <!-- The element which is wrapped goes here -->

  <div class="z-position-bottom-center z-position-small">
    <ul class="z-thumbnav">
      ...
    </ul>
  </div>
</div>