Trying to get it working

shared/naturalcrit/nav/nav.jsx

@@ -38,28 +38,29 @@ var Nav = {
 				href : null,
 				newTab : false,
 				onClick : function(){},
-				color : null
+				color : null,
+				collaspe : false
 			};
 		},
 		handleClick : function(){
 			this.props.onClick();
 		},
 		render : function(){
-			var classes = cx('navItem', this.props.color, this.props.className);
+			var classes = cx('navItem', this.props.color, this.props.className, {collaspe : this.props.collaspe});
 
 			var icon;
 			if(this.props.icon) icon = <i className={'fa ' + this.props.icon} />;
 
-			const props = _.omit(this.props, ['newTab']);
+			const props = _.omit(this.props, ['newTab', 'collaspe']);
 
 			if(this.props.href){
 				return <a {...props} className={classes} target={this.props.newTab ? '_blank' : '_self'} >
-					{this.props.children}
+					<span>{this.props.children}</span>
 					{icon}
 				</a>
 			}else{
 				return <div {...props} className={classes} onClick={this.handleClick} >
-					{this.props.children}
+					<span>{this.props.children}</span>
 					{icon}
 				</div>
 			}

shared/naturalcrit/nav/nav.less

@@ -49,10 +49,30 @@ nav{
 		color            : white;
 		text-decoration  : none;
 		text-transform   : uppercase;
+		display: inline-block;
 		i{
 			margin-left : 5px;
 			font-size   : 13px;
 		}
+		&.collaspe{
+			//width : 60px;
+			overflow: hidden;
+			background-color: red;
+			span{
+				white-space: nowrap;
+				width : 0%;
+				display: inline-block;
+				overflow: hidden;
+				visibility: hidden;
+			}
+			&:hover{
+				span{
+					visibility: visible;
+					width : auto;
+				}
+			}
+		}
+
 		&.tealLight:hover{ background-color : @tealLight };
 		&.teal:hover{ background-color : @teal };
 		&.greenLight:hover{ background-color : @greenLight };