diff --git a/cosmoz-data-nav.js b/cosmoz-data-nav.js
index 84eaf14..a907622 100644
--- a/cosmoz-data-nav.js
+++ b/cosmoz-data-nav.js
@@ -156,7 +156,7 @@
 					type: Object,
 					notify: true,
 					readOnly: true,
-					computed: '_getItem(selected, items)'
+					computed: '_getItem(selected, items.*)'
 				},
 
 				/**
@@ -601,7 +601,8 @@
 		}
 
 		_getItem(index, items = this.items) {
-			return items[index];
+			const arr = items.base ? items.base : items;
+			return arr[index];
 		}
 
 		_resetElement(index) {
diff --git a/demo/index.html b/demo/index.html
index ab714ea..c3073ac 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -52,6 +52,7 @@ <h3>Basic <code>cosmoz-data-nav</code>.</h3>
 				<dom-bind id="basic">
 					<template is="dom-bind">
 						<cosmoz-data-nav items="[[ items ]]" index-as="index" as="item" on-need-data="onNeedData" selected="{{ selected }}"
+						selected-item="{{selItem}}"
 						 hash-param="tt">
 							<template>
 								<cosmoz-demo-view class="fit layout vertical" item="{{ item }}" index="[[index]]" data-idx$="{{ computeColorIndex(index) }}"
@@ -59,7 +60,8 @@ <h3>Basic <code>cosmoz-data-nav</code>.</h3>
 							</template>
 						</cosmoz-data-nav>
 						<paper-textarea value="{{ computeJSON(selected, items.*) }}">
-							<paper-textarea>
+						</paper-textarea>
+							<div>Selected: [[toJSON(selItem)]]</div>
 					</template>
 				</dom-bind>
 			</template>
@@ -92,6 +94,9 @@ <h3>Basic <code>cosmoz-data-nav</code>.</h3>
 				basic.computeJSON = function (index) {
 					return JSON.stringify(this.items[index]);
 				};
+				basic.toJSON = function (item) {
+					return JSON.stringify(item);
+				};
 				basic.set('items', items);
 			});
 
@@ -100,4 +105,4 @@ <h3>Basic <code>cosmoz-data-nav</code>.</h3>
 	</script>
 </body>
 
-</html>
\ No newline at end of file
+</html>