User guide


Barba router allows you to use custom routes for page transitions.


This module adds a route rule to Barba, that is less important than custom() but more than namespace, see core transition rules for details.


barba.use(router, <options>)

Option Type Default Description
routes Array [] Array of <Route>

<route> object

Property Type Description
name String Value to be used with transitions
path String URL pattern

path supports dynamic segments /product/:id and regular expressions /:lang(fr|en)/:post See the path-to-regexp for detailed documentation.


import barba from '@barba/core';
import barbaRouter from '@barba/router';

// define your routes
const routes = [{
  path: '/index',
  name: 'home'
}, {
  path: '/product/:id',
  name: 'item'

// tell Barba to use the router with your custom routes
barba.use(barbaRouter, {

// init Barba