### File

`src/ui-shell/sidenav/sidenav-item.component.ts`

### Description

`SideNavItem` can either be a child of `SideNav` or `SideNavMenu`

### Metadata

selector | `ibm-sidenav-item`

template

    <li [ngClass]="{
    	'bx--side-nav__item': !isSubMenu,
    	'bx--side-nav__menu-item': isSubMenu
    }"
    [attr.role]="(isSubMenu ? 'none' : null)">
    	<a
    		class="bx--side-nav__link"
    		[href]="href"
    		[attr.role]="(isSubMenu ? 'menuitem' : null)"
    		[attr.aria-current]="(active ? 'page' : null)"
    		(click)="navigate($event)">
    		<div *ngIf="!isSubMenu" class="bx--side-nav__icon">
    			<ng-content select="[icon]"></ng-content>
    		</div>
    		<span class="bx--side-nav__link-text">
    			<ng-content></ng-content>
    		</span>
    	</a>
    </li>

### Index

###### Properties

- Protected _href
- isSubMenu

###### Methods

- navigate

###### Inputs

- active
- href
- route
- routeExtras

###### Outputs

- navigation

###### Accessors

- href

### Constructor

`constructor(domSanitizer: DomSanitizer, router: Router)`
Defined in src/ui-shell/sidenav/sidenav-item.component.ts:74

Parameters :

Name | Type | Optional
domSanitizer | `DomSanitizer` | No
router | `Router` | No

### Inputs

`active` | Toggles the active (current page) state for the link. Default value : `false`
Defined in src/ui-shell/sidenav/sidenav-item.component.ts:53

`href` | Link for the item. NOTE: do not pass unsafe or untrusted values, this has the potential to open you up to XSS attacks Type : `string`
Defined in src/ui-shell/sidenav/sidenav-item.component.ts:42

`route` | Array of commands to send to the router when the link is activated See: https://angular.io/api/router/Router#navigate Type : `any[]`
Defined in src/ui-shell/sidenav/sidenav-item.component.ts:59

`routeExtras` | Router options. Used in conjunction with `route` See: https://angular.io/api/router/Router#navigate Type : `any`
Defined in src/ui-shell/sidenav/sidenav-item.component.ts:65

### Outputs

`navigation` | Emits the navigation status promise when the link is activated `$event` Type: `EventEmitter`
Defined in src/ui-shell/sidenav/sidenav-item.component.ts:70

### Methods

navigate
`navigate(event)`
Defined in src/ui-shell/sidenav/sidenav-item.component.ts:78

Parameters :

Name | Optional
event | No

Returns : `void`

### Properties

Protected _href
`_href: `string``
Type : `string`
Default value : `"javascript:void(0)"`
Defined in src/ui-shell/sidenav/sidenav-item.component.ts:74

isSubMenu
`isSubMenu: ```
Default value : `false`
Defined in src/ui-shell/sidenav/sidenav-item.component.ts:72

### Accessors

href
get `href()`
Defined in src/ui-shell/sidenav/sidenav-item.component.ts:46
set `href(v: string)`
Defined in src/ui-shell/sidenav/sidenav-item.component.ts:42

Link for the item. NOTE: do not pass unsafe or untrusted values, this has the potential to open you up to XSS attacks

Parameters :

Name | Type | Optional
v | `string` | No

Returns : `void`

    import {
    	Component,
    	Input,
    	Optional,
    	Output,
    	EventEmitter
    } from "@angular/core";
    import { DomSanitizer } from "@angular/platform-browser";
    import { Router } from "@angular/router";

    /**
     * `SideNavItem` can either be a child of `SideNav` or `SideNavMenu`
     */
    @Component({
    	selector: "ibm-sidenav-item",
    	template: `
    		<li [ngClass]="{
    			'bx--side-nav__item': !isSubMenu,
    			'bx--side-nav__menu-item': isSubMenu
    		}"
    		[attr.role]="(isSubMenu ? 'none' : null)">
    			<a
    				class="bx--side-nav__link"
    				[href]="href"
    				[attr.role]="(isSubMenu ? 'menuitem' : null)"
    				[attr.aria-current]="(active ? 'page' : null)"
    				(click)="navigate($event)">
    				<div *ngIf="!isSubMenu" class="bx--side-nav__icon">
    					<ng-content select="[icon]"></ng-content>
    				</div>
    				<span class="bx--side-nav__link-text">
    					<ng-content></ng-content>
    				</span>
    			</a>
    		</li>
    	`
    })
    export class SideNavItem {
    	/**
    	 * Link for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks
    	 */
    	@Input() set href(v: string) {
    		this._href = v;
    	}

    	get href() {
    		return this.domSanitizer.bypassSecurityTrustUrl(this._href) as string;
    	}

    	/**
    	 * Toggles the active (current page) state for the link.
    	 */
    	@Input() active = false;

    	/**
    	 * Array of commands to send to the router when the link is activated
    	 * See: https://angular.io/api/router/Router#navigate
    	 */
    	@Input() route: any[];

    	/**
    	 * Router options. Used in conjunction with `route`
    	 * See: https://angular.io/api/router/Router#navigate
    	 */
    	@Input() routeExtras: any;

    	/**
    	 * Emits the navigation status promise when the link is activated
    	 */
    	@Output() navigation = new EventEmitter<Promise<boolean>>();

    	isSubMenu = false;

    	protected _href = "javascript:void(0)";

    	constructor(protected domSanitizer: DomSanitizer, @Optional() protected router: Router) {}

    	navigate(event) {
    		if (this.router && this.route) {
    			event.preventDefault();
    			const status = this.router.navigate(this.route, this.routeExtras);
    			this.navigation.emit(status);
    		}
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""