# 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

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

#### Markup

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