Markup
At the beginning, Barba needs to know a little bit about your site architecture.
DOM structure
By default, you can use this markup inside your pages:
1 | <body data-barba="wrapper"> |
Note that you can build the
html
in many ways: if your header/nav/links need to be updated along the pages, put them inside thecontainer
, same if you have additional links in your footer that change between pages.Keep in mind that the
wrapper
should always wrap thecontainer
.
Wrapper
The wrapper is the main Barba section that contains all your page structure and the Barba container. Beware, everything inside of this wrapper and outside of the container will not be updated by Barba: you can put your <header>
, <footer>
or <nav>
safely here. It is mainly defined on the <body>
tag, but you can add it on a div
or section
for example.
Container
The container defines a section in which content is updated automatically when you navigate between your pages. Beware, everything inside of this container will be updated by Barba: you can put your <footer>
safely here. It is mainly defined on the <main>
tag, but you can add it on a div
or section
for example.
Beware, Barba appends the container to the wrapper, so it will always end up at the bottom and if you have more DOM elements in there, they will be bumped up.
Namespace
The namespace allows you to define a unique name for each page. Barba mainly uses this namespace for Transition rules and Views.
Schema
You can easily override every data-barba attributes.
1 | barba.init({ |
Now you can use data-custom="wrap"
in your HTML instead of data-barba="wrapper"
.
See the list of all customizable attributes in the default
schema
.