Polymer-based web component for nested views

[ This description is mirrored from README.md at github.com/BrightspaceUI/hierarchical-view on 2019-05-10 ]


Published on webcomponents.org Bower version Build status

A Polymer-based web component and behavior for hierarchical views.


d2l-hierarchical-view can be installed from Bower:

bower install d2l-hierarchical-view


Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import the component or behavior.



  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../d2l-hierarchical-view/d2l-hierarchical-view.html">

Nest the d2l-hierarchical-view elements on your page.

<d2l-hierarchical-view id="view1">
  <div style="min-height: 200px;">
    <div class="buttons">
      <button onclick="showSubView('view2a');">view 2a</button>
      <button onclick="showSubView('view2b');">view 2b</button>
    view 1
    <div class="info">min-height: 200</div>
      <d2l-hierarchical-view id="view2a">
        <div style="min-height: 400px;">
          <div class="buttons">
            <button onclick="showParentView('view2a');">view 1 (parent)</button>
            <button onclick="showSubView('view3');">view 3</button>
          view 2a
          <div class="info">min-height: 400</div>
          <d2l-hierarchical-view id="view3">
            <div style="min-height: 300px;">
              <div class="buttons">
                <button onclick="showParentView('view3');">view 2a (parent)</button>
              view 3
              <div class="info">min-height: 300</div>
      <d2l-hierarchical-view id="view2b">
        <div style="min-height: 200px;">
          <div class="buttons">
            <button onclick="showParentView('view2b');">view 1 (parent)</button>
          view 2b
          <div class="info">min-height: 200</div>


Use the show and hide methods on child views to control visibility:

// to show child (hiding parent)

// to hide child (show parent)

Other helpful methods:

// get the currently active hierarchical view

// get the root hierarchical view

// whether the specified hierarchical view is the active view

// force resize of the hierarchical view (useful if initially not displayed when attached)


The hierarchical views raise show/hide events when showing or hiding child views.

// triggered when child view will be shown (before animation begins)
view.addEventListener('d2l-hierarchical-view-show-start', () => { ... });

// triggered when child view is shown (when animation ends)
view.addEventListener('d2l-hierarchical-view-show-complete', () => { ... });

// triggered when child view will be hidden (before animation begins)
view.addEventListener('d2l-hierarchical-view-hide-start', () => { ... });

// triggered when child view is hidden (when animation ends)
view.addEventListener('d2l-hierarchical-view-hide-complete', () => { ... });


To implement a custom hierarchical view component, import the d2l-hierarchical-view-behavior.html behavior, include the d2l-hierarchical-view-styles styles, and define a template containing the d2l-hierarchical-view-content class. For example, see d2l-hierarchical-view.

Developing, Testing and Contributing

After cloning the repo, run npm install to install dependencies.

If you don't have it already, install the Polymer CLI globally:

npm install -g polymer-cli

To start a local web server that hosts the demo page and tests:

polymer serve

To lint (eslint and Polymer lint):

npm run lint

To run unit tests locally using Polymer test:

polymer test --skip-plugin sauce

To lint AND run local unit tests:

npm test


Commits and PR merges to master will automatically do a minor version bump which will:

  • Update the version in package.json
  • Add a tag matching the new version
  • Create a github release matching the new version

By using either [increment major] or [increment patch] notation inside your merge message, you can overwrite the default version upgrade of minor to the position of your choice.


Link to this version
ImportedReleased 23 January 2019Apache License 2.0
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (0.1.4)
Browser Independent
Install with
bower install --save BrightspaceUI/hierarchical-view"#1.0.5"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.5