--- layout: default ---

# History Support

This example demonstrates history support in intercooler.

As you click between the tabs, the URL and history will be updated correctly, allowing back button support

- The `content` div tells Intercooler that it should be snap-shotted for history, rather than the body of the page, by using the `ic-history-elt` attribute. The element that is snap-shotted for history should be stable across your entire site so that the UI can be reliably restored.

- The navigation tabs parent `ul` targets a div with the `ic-target` attribute. This div encloses both the tabs and content, allowing the server side to render a new tab state as well as the new content.

  The key element on the `ul` that enables history support is the `ic-push-url` attribute, which tells Intercooler to push the url into the location bar, with a new history entry, when a request is made.

  Finally, because this nav is layered on top of actual pages, we use the `ic-select-from-response` attribute on the `ul` to pick out the content from within the response for the tab UI.

- Each tab has an `ic-get-from` attribute which points to the page for each respective tab. Because of the behavior inherited from the paren `ul`, the request will target the content div, will pick out the content tab-specific content from the response and will push a new entry into history.
- We use some transition CSS to make the inner content (but not the tabs) fade in and out.

{{content}}