Thumbnav
Create a flexible thumbnail navigation.
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.
Support
Franken UI is an independent project free for everyone. Help support it and
expand its component library.