# Javascript Combo Navs

The following pagy*_combo_nav_js offer an alternative pagination UI that combines navigation and pagination info in a single compact element:

  • pagy_combo_nav_js
  • pagy_bootstrap_combo_nav_js
  • pagy_bulma_combo_nav_js
  • pagy_foundation_combo_nav_js
  • pagy_materialize_combo_nav_js
  • pagy_semantic_combo_nav_js

They are the fastest and lightest nav on modern environments, recommended when you care about efficiency and server load ( see Maximizing Performance).

Here is a screenshot (from the bootstrap extra):

bootstrap_combo_nav_js
bootstrap_combo_nav_js

Try it now!

# Synopsis

See Setup Javascript.

pagy.rb (initializer)
# you only need one of the following extras
require 'pagy/extras/bootstrap'
require 'pagy/extras/bulma'
require 'pagy/extras/foundation'
require 'pagy/extras/materialize'
require 'pagy/extras/pagy'
require 'pagy/extras/semantic'
require 'pagy/extras/uikit'
Any View
<!-- Use just one: -->
<%== pagy_combo_nav_js(@pagy, **vars) %>
<%== pagy_bootstrap_combo_nav_js(@pagy, **vars) %>
<%== pagy_bulma_combo_nav_js(@pagy, **vars) %>
<%== pagy_foundation_combo_nav_js(@pagy, **vars) %>
<%== pagy_materialize_combo_nav_js(@pagy, **vars) %>
<%== pagy_semantic_combo_nav_js(@pagy, **vars) %>

# Methods

The method accepts also the same optional keyword arguments variables of the pagy_nav(pagy, **vars)