### File

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

### Example

### Metadata

selector | `ibm-sidenav-header`
template |
    <header class="bx--side-nav__header">
    	<div class="bx--side-nav__icon">
    		<ng-content select="[icon]"></ng-content>
    	</div>
    	<div class="bx--side-nav__details">
    		<h2 class="bx--side-nav__title" [title]="title">{{title}}</h2>
    		<div class="bx--side-nav__switcher">
    			<label class="bx--assistive-text" [for]="switcherId">
    				{{i18n.get('UI_SHELL.SIDE_NAV.SWITCHER') | async}}
    			</label>
    			<select [id]="switcherId" class="bx--side-nav__select">
    				<option class="bx--side-nav__option" disabled="" value="" selected="" hidden="">
    					{{i18n.get('UI_SHELL.SIDE_NAV.SWITCHER') | async}}
    				</option>
    				<option
    					*ngFor="let option of options"
    					class="bx--side-nav__option"
    					[value]="(option.value ? option.value : option.content)">
    					{{option.content}}
    				</option>
    			</select>
    			<div class="bx--side-nav__switcher-chevron">
    				<svg
    					focusable="false"
    					preserveAspectRatio="xMidYMid meet"
    					style="will-change: transform;"
    					xmlns="http://www.w3.org/2000/svg"
    					width="20"
    					height="20"
    					viewBox="0 0 32 32"
    					aria-hidden="true">
    					<path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path>
    				</svg>
    			</div>
    		</div>
    	</div>
    </header>

### Index

###### Properties
Public i18n Public switcherId
###### Inputs
options title

### Constructor

`constructor(i18n: I18n)`
Defined in src/ui-shell/sidenav/sidenav-header.component.ts:53
Parameters :
Name | Type | Optional
i18n | `I18n` | No

### Inputs

`options` | Type : `ListItem[]`
Defined in src/ui-shell/sidenav/sidenav-header.component.ts:52

`title` | Type : `string`
Defined in src/ui-shell/sidenav/sidenav-header.component.ts:51

### Properties

Public i18n
`i18n: `I18n``
Type : `I18n`
Defined in src/ui-shell/sidenav/sidenav-header.component.ts:55

Public switcherId
`switcherId: `string``
Type : `string`
Default value : `"sidenav-switcher"`
Defined in src/ui-shell/sidenav/sidenav-header.component.ts:53

    import { Component, Input } from "@angular/core";
    import { ListItem } from "../../dropdown/dropdown.module";
    import { I18n } from "../../i18n/i18n.module";

    /**
     * @deprecated Until futher notice. Will be removed in a future version.
     */
    @Component({
    	selector: "ibm-sidenav-header",
    	template: `
    		<header class="bx--side-nav__header">
    			<div class="bx--side-nav__icon">
    				<ng-content select="[icon]"></ng-content>
    			</div>
    			<div class="bx--side-nav__details">
    				<h2 class="bx--side-nav__title" [title]="title">{{title}}</h2>
    				<div class="bx--side-nav__switcher">
    					<label class="bx--assistive-text" [for]="switcherId">
    						{{i18n.get('UI_SHELL.SIDE_NAV.SWITCHER') | async}}
    					</label>
    					<select [id]="switcherId" class="bx--side-nav__select">
    						<option class="bx--side-nav__option" disabled="" value="" selected="" hidden="">
    							{{i18n.get('UI_SHELL.SIDE_NAV.SWITCHER') | async}}
    						</option>
    						<option
    							*ngFor="let option of options"
    							class="bx--side-nav__option"
    							[value]="(option.value ? option.value : option.content)">
    							{{option.content}}
    						</option>
    					</select>
    					<div class="bx--side-nav__switcher-chevron">
    						<svg
    							focusable="false"
    							preserveAspectRatio="xMidYMid meet"
    							style="will-change: transform;"
    							xmlns="http://www.w3.org/2000/svg"
    							width="20"
    							height="20"
    							viewBox="0 0 32 32"
    							aria-hidden="true">
    							<path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path>
    						</svg>
    					</div>
    				</div>
    			</div>
    		</header>
    	`
    })
    export class SideNavHeader {
    	@Input() title: string;
    	@Input() options: ListItem[];
    	public switcherId = "sidenav-switcher";

    	constructor(public i18n: I18n) { }
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""