Thumbnav

Ready Added in 2.0.0

Create a flexible thumbnail navigation.

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 Flex component.

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

Note For a better layout, if items should wrap into the next row, add the gls-margin attribute from the Margin component.

  • <ul class="gls-thumbnav" gls-margin>
    <li class="gls-active"><a href="#"><img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="100" height="67" alt=""></a></li>
    <li><a href="#"><img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="100" height="67" alt=""></a></li>
    <li><a href="#"><img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" width="100" height="67" alt=""></a></li>
</ul>

Vertical alignment

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

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

  • <ul class="gls-thumbnav gls-thumbnav-vertical" gls-margin>
    <li class="gls-active"><a href="#"><img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="100" height="67" alt=""></a></li>
    <li><a href="#"><img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="100" height="67" alt=""></a></li>
    <li><a href="#"><img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" width="100" height="67" alt=""></a></li>
</ul>

Position as overlay

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

<div class="gls-position-relative">

    <!-- The element which is wrapped goes here -->

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

</div>

  • <div class="gls-position-relative" gls-slideshow="animation: fade">

    <ul class="gls-slideshow-items">
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="" gls-cover>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" alt="" gls-cover>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
        </li>
    </ul>

    <div class="gls-position-bottom-center gls-position-small">
        <ul class="gls-thumbnav">
            <li gls-slideshow-item="0"><a href="#"><img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="100" height="67" alt=""></a></li>
            <li gls-slideshow-item="1"><a href="#"><img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="100" height="67" alt=""></a></li>
            <li gls-slideshow-item="2"><a href="#"><img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" width="100" height="67" alt=""></a></li>
        </ul>
    </div>

</div>