Home Start Get started Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties Build an app 1. Get set up 2. Create a new page 3. Add some elements 4. Deploy Polymer Feature overview Quick tour Define elements Register an element Declare properties Instance methods Behaviors Local DOM & styling Local DOM Styling Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Tools Tools overview Polymer CLI Document your elements Test your elements Optimize for production Publish an element Advanced tools Services What's new Release notes 1.0 Migration guide About Polymer 1.0 Resources Community Browser compatibility API Reference Polymer.Base array-selector custom-style dom-bind dom-if dom-repeat dom-template Polymer.Templatizer Global settings 2.0 Preview About Polymer 2.0 Upgrade guide App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Serve your app Case study Shop Elements News

Update: app-route was previously called carbon-route. The carbon line of elements have been renamed the app elements to reflect their role as tools for building full client-side apps.

We're excited to announce the beta release of the app-route element—a composable, modular web component router! To dive into this new element and see what it can do, check out the Encapsulated Routing with Elements article on the Polymer site and take a look at its documentation in the Polymer Elements catalog.

The app-route element provides a declarative, modular way for web components to interact with the URL. This beta version is complete but may still evolve based on your feedback.

Here's an example of how you can use the app-route (and its included app-location) element:

<app-location route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/tabs/:tabName" data="{{data}}"></app-route>

<paper-tabs selected="{{data.tabName}}" attr-for-selected="key">
  <paper-tab key="foo">Foo</paper-tab>
  <paper-tab key="bar">Bar</paper-tab>
  <paper-tab key="baz">Baz!</paper-tab>
</paper-tabs>

<neon-animated-pages selected="{{data.tabName}}"
                     attr-for-selected="key"
                     entry-animation="slide-from-left-animation"
                     exit-animation="slide-right-animation">
  <neon-animatable key="foo">Foo Page Here</neon-animatable>
  <neon-animatable key="bar">Bar Page Goes Here</neon-animatable>
  <neon-animatable key="baz">Baz Page, the Best One of the Three</neon-animatable>
</neon-animated-pages>

The app-route element is part of the Polymer project's "app" product-line of components—a set designed to help encapsulate structured patterns for building large, complex applications using web components. Other elements that may fill out this product line—including i18n components—are still in their earlier stages. We'll being opening up these elements in a similar "beta" stage once they're at a point of stability to be able to receive meaningful feedback, and are targeting May to have the next handful of these components released. We'd also love to hear about the common application-level problems you run into when building web component-driven apps, that could form the basis of future app elements—please feel free to file issues on the app-elements meta-repo with ideas.