Thumbnav

Thumbnav

Create a flexible thumbnail navigation that can be aligned with the Flex component.

Usage

To apply this component, add the .uk-thumbnav class to an <ul> element and nest your thumbnail images inside <a> elements within the list items. The thumbnav will wrap into several rows, if it is wider than its container and automatically applies a gutter. Add the .uk-active class to create an active state.

To align a subnav, for example to horizontally center it, you can use the Flex component.

Example

  • placeholder 200x100 - Thumbnav
  • placeholder 200x100 - Thumbnav
  • placeholder 200x100 - Thumbnav
  • placeholder 200x100 - Thumbnav
  • placeholder 200x100 - Thumbnav

Markup

<ul class="uk-thumbnav">
    <li class="uk-active"><a href=""><img src="" alt=""></a></li>
    <li><a href=""><img src="" alt=""></a></li>
</ul>

Thumbnav and grid

You can use one of the .uk-grid-width-* classes from the Grid component to evenly accomodate all thumbnav items within one row.

Example

  • placeholder 200x100 - Thumbnav
  • placeholder 200x100 - Thumbnav
  • placeholder 200x100 - Thumbnav
  • placeholder 200x100 - Thumbnav
  • placeholder 200x100 - Thumbnav

Markup

<ul class="uk-thumbnav uk-grid-width-1-5">
    <li>...</li>
</ul>