#

# nav_js_tag

nav_js_tag functions similarly to a nav_tag, with the following added features:

Enables client-side rendering.
Provides optional responsiveness.
Improves performance and optimizes resource usage (see Maximizing Performance).

Responsive nav_js_tag (:bootstrap style)

It works with all paginators but `:keyset`

<%== @pagy.nav_js_tag(**options %>  <%# default pagy style %>
<%== @pagy.nav_js_tag(:bootstrap, **options) %>
<%== @pagy.nav_js_tag(:bulma, **options) %>

HTML Fallback

If Javascript is disabled in the client browser, this helper will not render anything. You should implement your own HTML fallback:

<noscript><%== pagy_nav(@pagy) %></noscript>

Window Resizing

The nav_js_tag elements are automatically re-rendered on window resize. If another function changes the size without causing a window resize, you need to explicitly re-render:

document.getElementById('my-pagy-nav-js').render();

Overriding `_js` helpers is not recommended

The *_js* helpers are tightly coupled with the javascript code, so any partial overriding on one side, would be quite fragile and might break in a next release.

See Common Nav Styles

steps: { 0 => 5, 540 => 7, 720 => 9 }
- Enable responsiveness. Assign different number of :slots to different tag widths.

See also other applicabe options: nav_tag Options

Notice: when :steps is not set, the nav_js_tag behaves exactly as a nav_tag: just faster.

Set it as a hash, where the keys are integers representing the widths in pixels, and the values are the :slots options to be applied for those widths.

For example:

{ 0 => 5, 540 => 7, 720 => 9 } means that from 0 to 540 pixels width, Pagy will use 5 slots, from 540 to 720 it will use 7 slots, and over 720 it will use 9 slots. (Read more about the :slots option in the How to control the pagination bar section.)

:steps must contain a `0` width

You can set any number of steps with any arbitrary width/slots. The only requirement is that the :steps hash must always contain the 0 width, or a Pagy::OptionsError exception will be raised.

# Setting the right steps

Setting the :steps can enhance responsiveness and ensure seamless transitions.

Consider these guidelines to achieve optimal results:

Define discrete :steps using width/slots pairs to control the pagination behavior.
Ensure the container's width accommodates all slots for a smooth transition as it resizes.
Synchronize the pagy :steps with your container's discrete width changes, for consistent alignment.
Test responsiveness to confirm that assigned slots fit within the corresponding width for each step.

#