Thumbnav
Create a flexible thumbnail navigation.
FrankenstyleKit (aka Franken UI 3.0) is now available. Support for the current version will gradually wind
down. It will continue to work, but using the latest version is recommended
for new projects so you can benefit from future updates and enhancements.
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 from Tailwind CSS.
| Class | Description |
|---|---|
.uk-thumbnav | Add this class to a <ul> element to define the Thumbnav component. Nest your thumbnail images inside <a> elements within the list. |
.uk-active | Add this class to a list item to apply an active state. |
Vertical alignment
The thumbnav can also be displayed vertically. Just add the .uk-thumbnav-vertical modifier.
Position as overlay
To position the thumbnav on top of an element or the Slideshow component for example, add one of the .uk-position-* classes from the Position component to a div element wrapping the thumbnav. To create a position context on the container, add the .uk-position-relative class.