# `PhiaUi.Components.Thumbnav`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/navigation/thumbnav.ex#L1)

Thumbnail navigation strip for image galleries and slideshows.

Renders a row (or column) of clickable thumbnail images. The active
item is highlighted with a ring. Commonly paired with a carousel or
lightbox component.

## Examples

    <.thumbnav>
      <.thumbnav_item src="/images/photo1-thumb.jpg" active={true} on_click="select_slide" value="0" />
      <.thumbnav_item src="/images/photo2-thumb.jpg" on_click="select_slide" value="1" />
      <.thumbnav_item src="/images/photo3-thumb.jpg" on_click="select_slide" value="2" />
    </.thumbnav>

## Vertical orientation

    <.thumbnav orientation={:vertical}>
      <.thumbnav_item src="/img/1.jpg" active={true} />
      <.thumbnav_item src="/img/2.jpg" />
    </.thumbnav>

# `thumbnav`

Renders a thumbnail navigation strip container.
## Attributes

* `orientation` (`:atom`) - Layout direction. Defaults to `:horizontal`. Must be one of `:horizontal`, or `:vertical`.
* `gap` (`:atom`) - Gap between thumbnails. Defaults to `:md`. Must be one of `:sm`, `:md`, or `:lg`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the `<nav>` element.
## Slots

* `inner_block` (required) - thumbnav_item children.

# `thumbnav_item`

Renders a single thumbnail navigation item.
## Attributes

* `src` (`:string`) (required) - Thumbnail image URL.
* `alt` (`:string`) - Image alt text. Defaults to `""`.
* `active` (`:boolean`) - Whether this item is selected. Defaults to `false`.
* `href` (`:string`) - Optional link URL. Defaults to `nil`.
* `on_click` (`:string`) - phx-click event name. Defaults to `nil`.
* `value` (`:string`) - phx-value-index or similar. Defaults to `nil`.
* `width` (`:string`) - Thumbnail width class. Defaults to `"w-16"`.
* `height` (`:string`) - Thumbnail height class. Defaults to `"h-16"`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the item element.

---

*Consult [api-reference.md](api-reference.md) for complete listing*