diff --git a/src/demos/components/treeviews.jsx b/src/demos/components/treeviews.jsx
new file mode 100644
index 0000000..ac01506
--- /dev/null
+++ b/src/demos/components/treeviews.jsx
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2015-present, CWB SAS
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { Component } from "react";
+import TreeView from "../../libs/components/treeView";
+
+export default class TreeViews extends Component {
+  state = {
+    items: [
+      {
+        id: "i1",
+        name: "Item 1",
+        icon: "folder",
+        color: "gray",
+        children: [
+          {
+            id: "i2a",
+            name: "SubItem 1",
+            icon: "insert_drive_file",
+            color: "gray",
+          },
+          {
+            id: "i2b",
+            name: "SubItem 2",
+            icon: "folder",
+            color: "gray",
+            children: [
+              {
+                id: "i2aa",
+                name: "SubItem 1",
+                icon: "insert_drive_file",
+                color: "gray",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: "i2",
+        name: "Item 2",
+        icon: "insert_drive_file",
+        color: "gray",
+      },
+      {
+        id: "i3",
+        name: "Item 3",
+        icon: "folder",
+        color: "gray",
+        children: [],
+      },
+    ],
+  };
+
+  collapseChild(items, itemId) {
+    const its = items;
+    items.forEach((item, index) => {
+      if (item.id === itemId) {
+        its[index].collapsed = !item.collapsed;
+      } else if (item.children) {
+        this.collapseChild(item.children, itemId);
+      }
+    });
+    return its;
+  }
+
+  handleCollapse = (index, level, itemId) => {
+    const { items } = this.state;
+    this.collapseChild(items, itemId);
+    this.setState({ items });
+  };
+
+  render() {
+    const { items } = this.state;
+    return (
+      <section>
+        <h1>TreeView examples </h1>
+        <div style={{ padding: "16px" }}>
+          <TreeView
+            items={items}
+            selectedItem={-1}
+            onSelect={() => {}}
+            onCollapse={this.handleCollapse}
+          />
+        </div>
+      </section>
+    );
+  }
+}
diff --git a/src/demos/main.jsx b/src/demos/main.jsx
index 8779014..85690d2 100644
--- a/src/demos/main.jsx
+++ b/src/demos/main.jsx
@@ -13,6 +13,7 @@ import SubToolbars from "./components/subToolbars";
 import Lists from "./components/lists";
 import FileInputs from "./components/fileInputs";
 import Tooltips from "./components/tooltips";
+import TreeViews from "./components/treeviews";
 
 const Main = ({ children }) => (
   <main>
@@ -20,6 +21,7 @@ const Main = ({ children }) => (
     <Tooltips />
     <SubToolbars />
     <Lists />
+    <TreeViews />
     <ContentEditables />
     <ExpansionPanels />
     <Steppers />
diff --git a/src/libs/components/list/listDragItem.jsx b/src/libs/components/list/listDragItem.jsx
index 6f48dd3..5b4041b 100644
--- a/src/libs/components/list/listDragItem.jsx
+++ b/src/libs/components/list/listDragItem.jsx
@@ -4,10 +4,11 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { Component, Children } from "react";
+import React, { Component } from "react";
+import { findDOMNode } from "react-dom";
 import PropTypes from "prop-types";
 import { DragSource, DropTarget } from "react-dnd";
-import Zrmc, { Icon } from "zrmc";
+import { ListItem } from "zrmc";
 
 const MDC_LISTITEM = "mdc-list-item";
 
@@ -107,70 +108,30 @@ export default class ListDragItem extends Component {
     delete otherProps.onDrop;
     delete otherProps.isDragging;
 
-    let classes = MDC_LISTITEM;
-    let graphic;
-    if (activated) {
-      classes += " mdc-list-item--activated";
-    }
-    if (icon) {
-      graphic = (
-        <Icon
-          className="mdc-list-item__graphic"
-          aria-hidden="true"
-          name={icon}
-        />
-      );
-    } else if (imgSrc) {
-      graphic = (
-        <img
-          className="mdc-list-item__graphic"
-          src={imgSrc}
-          width={imgSize}
-          height={imgSize}
-          alt={imgLabel}
-        />
-      );
-    }
-    let meta;
-    let text = Children.map(children, (child) => {
-      if (child.props && child.props.mdcElement === "mdc-list-item__meta") {
-        meta = child;
-        return null;
-      }
-      return child;
-    });
-    if (secondaryText) {
-      text = (
-        <span className="mdc-list-item__text">
-          {text}
-          <span className="mdc-list-item__secondary-text">{secondaryText}</span>
-        </span>
-      );
-    }
-    let el;
-    if (type === "a") {
-      el = (
-        <a className={classes} href={href} onClick={onClick}>
-          {graphic}
-          {text}
-          {meta}
-        </a>
-      );
-    } else {
-      el = (
-        <li
-          role="menuitem"
-          className={classes}
-          onKeyPress={() => {}}
-          onClick={onClick}
-        >
-          {graphic}
-          {text}
-          {meta}
-        </li>
-      );
-    }
-    return connectDragSource(connectDropTarget(Zrmc.render(el, otherProps)));
+    return (
+      <ListItem
+        type={type}
+        icon={icon}
+        activated={activated}
+        imgSrc={imgSrc}
+        imgSize={imgSize}
+        imgLabel={imgLabel}
+        secondaryText={secondaryText}
+        href={href}
+        onClick={onClick}
+        props={otherProps}
+        /* eslint-disable react/no-find-dom-node */
+        // TODO react-dnd doesn't work with findDOMNode replacement
+        // see : https://github.com/react-dnd/react-dnd/issues/998
+        ref={(instance) => {
+          connectDropTarget(findDOMNode(instance));
+          connectDragSource(findDOMNode(instance));
+        }}
+        /* eslint-enaable react/no-find-dom-node */
+      >
+        {children}
+      </ListItem>
+    );
   }
 }
 
diff --git a/src/libs/components/treeView/index.jsx b/src/libs/components/treeView/index.jsx
new file mode 100644
index 0000000..cf7ca32
--- /dev/null
+++ b/src/libs/components/treeView/index.jsx
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2015-present, CWB SAS
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from "react";
+import PropTypes from "prop-types";
+import { List } from "zrmc";
+import Item from "./item";
+
+const renderItem = (
+  list,
+  item,
+  index,
+  selectedItem,
+  onSelect,
+  onCollapse,
+  selectedLevel = 0,
+  level = 0,
+) => {
+  const content = item.name;
+  const { icon } = item;
+  if (icon) {
+    let { color } = item;
+    if (!color) {
+      color = "gray";
+    }
+  }
+  let cn = "selectableListItem";
+  if (selectedItem === index && selectedLevel === level) {
+    cn = "selectedListItem";
+  }
+  list.push(
+    <Item
+      level={level}
+      icon={icon}
+      key={item.id}
+      onClick={(e) => {
+        e.preventDefault();
+        onSelect(index, level, item.id);
+      }}
+      onCollapse={() => {
+        onCollapse(index, level, item.id);
+      }}
+      className={cn}
+      arrow={!!item.children}
+      collapsed={item.collapsed}
+      activated={item.activated}
+    >
+      {content}
+    </Item>,
+  );
+  if (item.children && !item.collapsed) {
+    item.children.map((sitem, sindex) =>
+      renderItem(
+        list,
+        sitem,
+        sindex,
+        selectedItem,
+        onSelect,
+        onCollapse,
+        selectedLevel,
+        level + 1,
+      ),
+    );
+  }
+};
+
+const TreeView = ({
+  items,
+  selectedItem,
+  onSelect,
+  onCollapse,
+  className,
+  style,
+}) => (
+  <List className={className} style={style}>
+    {items.map((item, index) => {
+      const list = [];
+      renderItem(list, item, index, selectedItem, onSelect, onCollapse);
+      return list;
+    })}
+  </List>
+);
+
+TreeView.defaultProps = {
+  className: null,
+  style: null,
+};
+
+TreeView.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      name: PropTypes.string,
+      icon: PropTypes.string,
+      children: PropTypes.arrayOf(PropTypes.shape({})),
+    }),
+  ).isRequired,
+  selectedItem: PropTypes.number.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  style: PropTypes.objectOf(PropTypes.string),
+  onCollapse: PropTypes.func,
+};
+
+export default TreeView;
diff --git a/src/libs/components/treeView/item.jsx b/src/libs/components/treeView/item.jsx
new file mode 100644
index 0000000..ff38813
--- /dev/null
+++ b/src/libs/components/treeView/item.jsx
@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2015-present, CWB SAS
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { ListItem } from "zrmc";
+import ItemGraphics from "./itemGraphics";
+
+const MDC_LISTITEM = "mdc-list-item";
+
+export default class Item extends Component {
+  render() {
+    const {
+      children,
+      type,
+      icon,
+      activated,
+      imgSrc,
+      imgSize,
+      imgLabel,
+      secondaryText,
+      href,
+      onClick,
+      onCollapse,
+      level,
+      arrow,
+      collapsed,
+      ...otherProps
+    } = this.props;
+    let style;
+    if (level > 0) {
+      const l = 16 + level * 16;
+      style = { paddingLeft: `${l}px` };
+    }
+    return (
+      <ListItem
+        style={style}
+        type={type}
+        activated={activated}
+        imgSrc={imgSrc}
+        imgSize={imgSize}
+        imgLabel={imgLabel}
+        secondaryText={secondaryText}
+        href={href}
+        onClick={onClick}
+        props={otherProps}
+      >
+        <ItemGraphics
+          icon={icon}
+          arrow={arrow}
+          collapsed={collapsed}
+          disabled={!activated}
+          onCollapse={onCollapse}
+        />
+        {children}
+      </ListItem>
+    );
+  }
+}
+
+Item.defaultProps = {
+  mdcElement: MDC_LISTITEM,
+  children: null,
+  type: "li",
+  activated: false,
+  icon: null,
+  imgSrc: null,
+  imgSize: 56,
+  imgLabel: null,
+  secondaryText: null,
+  href: null,
+  level: 0,
+  arrow: false,
+};
+
+Item.propTypes = {
+  mdcElement: PropTypes.string,
+  children: PropTypes.node,
+  type: PropTypes.string,
+  activated: PropTypes.bool,
+  icon: PropTypes.string,
+  imgSrc: PropTypes.string,
+  imgSize: PropTypes.number,
+  imgLabel: PropTypes.string,
+  secondaryText: PropTypes.string,
+  href: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
+  onCollapse: PropTypes.func,
+  level: PropTypes.number,
+  arrow: PropTypes.bool,
+  collapsed: PropTypes.bool,
+};
diff --git a/src/libs/components/treeView/itemGraphics.jsx b/src/libs/components/treeView/itemGraphics.jsx
new file mode 100644
index 0000000..b289d8b
--- /dev/null
+++ b/src/libs/components/treeView/itemGraphics.jsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2015-present, CWB SAS
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Icon } from "zrmc";
+
+const MDC_LISTITEMGRAPHICS = "mdc-list-item__graphic";
+
+export default class ItemGraphics extends Component {
+  handleArrowClick = (event) => {
+    event.stopPropagation();
+    const collapsed = !this.props.collapsed;
+    if (this.props.onCollapse) {
+      this.props.onCollapse(collapsed);
+    }
+  };
+
+  render() {
+    const { collapsed } = this.props;
+    const icon = this.props.icon ? (
+      <Icon
+        className="zui_treeview-icon mdc-list-item__graphic"
+        aria-hidden="true"
+      >
+        {this.props.icon}
+      </Icon>
+    ) : (
+      this.props.children
+    );
+    let cn = "mdc-list-item__graphic";
+    if (!this.props.arrow) {
+      cn = `zui_treeview-arrow-hidden ${cn}`;
+    } else {
+      cn = `zui_treeview-arrow ${cn}`;
+    }
+    return (
+      <span className="zui_treeview-graphics">
+        <Icon className={cn} onClick={this.handleArrowClick}>
+          {collapsed ? "arrow_right" : "arrow_drop_down"}
+        </Icon>
+        {icon}
+      </span>
+    );
+  }
+}
+ItemGraphics.defaultProps = {
+  mdcElement: MDC_LISTITEMGRAPHICS,
+  icon: null,
+  children: null,
+  arrow: false,
+  collapsed: false,
+};
+
+ItemGraphics.propTypes = {
+  mdcElement: PropTypes.string,
+  icon: PropTypes.string,
+  children: PropTypes.node,
+  collapsed: PropTypes.bool,
+  disabled: PropTypes.bool,
+  arrow: PropTypes.bool,
+  onCollapse: PropTypes.func,
+};
diff --git a/src/libs/css/app.css b/src/libs/css/app.css
index 46b488a..ef1f6ea 100644
--- a/src/libs/css/app.css
+++ b/src/libs/css/app.css
@@ -438,6 +438,28 @@
   margin-top: 12px;
 }
 
+.zui_treeview-graphics {
+  height: 24px;
+}
+
+.zui_treeview-arrow {
+  cursor: pointer;
+  margin-right: 0px;
+}
+
+.zui_treeview-arrow:hover {
+  color: #552682;
+}
+
+.zui_treeview-icon {
+  margin-right: 8px;
+}
+
+.zui_treeview-arrow-hidden {
+  visibility: hidden;
+  margin-right: 0px;
+}
+
 .mdc-drawer__footer {
   position: relative;
   margin-top: auto;
diff --git a/src/libs/index.js b/src/libs/index.js
index ce4aa95..5bcd58f 100644
--- a/src/libs/index.js
+++ b/src/libs/index.js
@@ -17,6 +17,7 @@ import TableComponent from "./components/tableComponent";
 import Tooltip from "./components/tooltip";
 import FileInput from "./components/fileInput";
 import DrawerFooter from "./components/drawerFooter";
+import TreeView from "./components/treeView";
 
 export {
   Stepper,
@@ -32,4 +33,5 @@ export {
   Tooltip,
   FileInput,
   DrawerFooter,
+  TreeView,
 };