Set currently active menu item in sidebar

ionic-v1
1

I am using ionic beta-8 and ion-side-menu to create a side menu that is partially open as per http://codepen.io/mhartington/pen/oxuiH

I have a static list of menu items that is created with the following;

		<ion-content>
		<ion-list>
			<ion-item nav-clear class="item-icon-left overview" menu-close href="#/app/overview">
				<i class="icon ion-home"></i>
				Overview
			</ion-item>
			<ion-item nav-clear class="item-icon-left" menu-close href="#/app/upload">
				<i class="icon ion-upload"></i>
				Upload
			</ion-item>
		</ion-list>
	</ion-content>

I would like to have class in the side menu that indicates which is the currently active state.

I read in another forum post that we should use “ui-sref-active” however my attempts to do so were not successful.

How would I add active side menu item to the codepen above ?

Thanks…

2

Works well for me.

3 Likes
3

your Ionic list :
<ion-item ui-sref="app.item1" ui-sref-active="active">Item 1/ion-item> <ion-item ui-sref="app.item2" ui-sref-active="active">Item 2</ion-item>

In your css or scss:
ion-list ion-item.active a { background: #ddd !important; }