### File

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

### Description

`Sidenav` is a fixed left navigation that may contain `SideNavItem`s or `SideNavMenu`s

See demo

../../iframe.html?id=ui-shell--side-navigation

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `ibm-sidenav`
template |
    <nav
    	class="bx--side-nav__navigation"
    	role="navigation"
    	[attr.aria-label]="i18n.get('UI_SHELL.SIDE_NAV.LABEL')">
    	<ng-content select="ibm-sidenav-header"></ng-content>
    	<ul class="bx--side-nav__items">
    		<div
    			class="bx--side-nav__header-navigation bx--side-nav__header-divider">
    			<ng-container *ngFor="let navigationItem of navigationItems">
    				<ibm-sidenav-item
    					*ngIf="navigationItem.type === 'item'"
    					[href]="navigationItem.href"
    					[route]="navigationItem.route"
    					[routeExtras]="navigationItem.routeExtras">
    					{{ navigationItem.content }}
    				</ibm-sidenav-item>
    				<ibm-sidenav-menu
    					*ngIf="navigationItem.type === 'menu'"
    					[title]="navigationItem.title"
    					[menuItems]="navigationItem.menuItems">
    				</ibm-sidenav-menu>
    			</ng-container>
    		</div>
    		<ng-content></ng-content>
    	</ul>
    	<footer class="bx--side-nav__footer">
    		<button
    			*ngIf="allowExpansion"
    			class="bx--side-nav__toggle"
    			type="button"
    			[title]="(expanded ? i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_CLOSE') : i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_OPEN')) | async"
    			(click)="toggle()">
    			<div class="bx--side-nav__icon">
    				<svg
    					*ngIf="expanded"
    					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="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4l6.6 6.6L8 22.6 9.4 24l6.6-6.6 6.6 6.6 1.4-1.4-6.6-6.6L24 9.4z"></path>
    				</svg>
    				<svg
    					*ngIf="!expanded"
    					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="M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path>
    				</svg>
    			</div>
    			<span class="bx--assistive-text">
    				{{(expanded ? i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_CLOSE') : i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_OPEN')) | async}}
    			</span>
    		</button>
    	</footer>
    </nav>

### Index

###### Properties
Public i18n
###### Methods
toggle
###### Inputs
allowExpansion expanded hidden navigationItems rail
###### HostBindings
attr.role class.bx--side-nav class.bx--side-nav--ux

### Constructor

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

### Inputs

`allowExpansion` | Default value : `false`
Defined in src/ui-shell/sidenav/sidenav.component.ts:100

`expanded` | Controls the expanded (`true`) or collapsed (`false`) state when on a small screen. Default value : `true`
Defined in src/ui-shell/sidenav/sidenav.component.ts:93

`hidden` | Controls the hidden (`true`) or visible (`false`) state Default value : `false`
Defined in src/ui-shell/sidenav/sidenav.component.ts:97

`navigationItems` | NavigationItems from the header navigation component which are displayed on the sidenav when the window innerWidth is small enough. Sidenav items and menus are created using the model used to create header navigation items. Type : `NavigationItem[]`
Defined in src/ui-shell/sidenav/sidenav.component.ts:107

`rail` | Default value : `false`
Defined in src/ui-shell/sidenav/sidenav.component.ts:98

### HostBindings

attr.role
`attr.role: ```
Default value : `"complementary"`
Defined in src/ui-shell/sidenav/sidenav.component.ts:88

class.bx--side-nav
`class.bx--side-nav: ```
Default value : `true`
Defined in src/ui-shell/sidenav/sidenav.component.ts:89

class.bx--side-nav--ux
`class.bx--side-nav--ux: ```
Default value : `true`
Defined in src/ui-shell/sidenav/sidenav.component.ts:99

### Methods

toggle
`toggle()`
Defined in src/ui-shell/sidenav/sidenav.component.ts:111
Returns : `void`

### Properties

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

    import {
    	Component,
    	HostBinding,
    	Input,
    	ViewEncapsulation
    } from "@angular/core";
    import { I18n } from "../../i18n/i18n.module";
    import { NavigationItem } from "../header/header-navigation-items.interface";

    /**
     * `Sidenav` is a fixed left navigation that may contain `SideNavItem`s or `SideNavMenu`s
     *
     * [See demo](../../?path=/story/ui-shell--side-navigation)
     *
     * <example-url>../../iframe.html?id=ui-shell--side-navigation</example-url>
     */
    @Component({
    	selector: "ibm-sidenav",
    	template: `
    		<nav
    			class="bx--side-nav__navigation"
    			role="navigation"
    			[attr.aria-label]="i18n.get('UI_SHELL.SIDE_NAV.LABEL')">
    			<ng-content select="ibm-sidenav-header"></ng-content>
    			<ul class="bx--side-nav__items">
    				<div
    					class="bx--side-nav__header-navigation bx--side-nav__header-divider">
    					<ng-container *ngFor="let navigationItem of navigationItems">
    						<ibm-sidenav-item
    							*ngIf="navigationItem.type === 'item'"
    							[href]="navigationItem.href"
    							[route]="navigationItem.route"
    							[routeExtras]="navigationItem.routeExtras">
    							{{ navigationItem.content }}
    						</ibm-sidenav-item>
    						<ibm-sidenav-menu
    							*ngIf="navigationItem.type === 'menu'"
    							[title]="navigationItem.title"
    							[menuItems]="navigationItem.menuItems">
    						</ibm-sidenav-menu>
    					</ng-container>
    				</div>
    				<ng-content></ng-content>
    			</ul>
    			<footer class="bx--side-nav__footer">
    				<button
    					*ngIf="allowExpansion"
    					class="bx--side-nav__toggle"
    					type="button"
    					[title]="(expanded ? i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_CLOSE') : i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_OPEN')) | async"
    					(click)="toggle()">
    					<div class="bx--side-nav__icon">
    						<svg
    							*ngIf="expanded"
    							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="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4l6.6 6.6L8 22.6 9.4 24l6.6-6.6 6.6 6.6 1.4-1.4-6.6-6.6L24 9.4z"></path>
    						</svg>
    						<svg
    							*ngIf="!expanded"
    							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="M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path>
    						</svg>
    					</div>
    					<span class="bx--assistive-text">
    						{{(expanded ? i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_CLOSE') : i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_OPEN')) | async}}
    					</span>
    				</button>
    			</footer>
    		</nav>
    	`,
    	encapsulation: ViewEncapsulation.None
    })
    export class SideNav {
    	@HostBinding("attr.role") role = "complementary";
    	@HostBinding("class.bx--side-nav") hostClass = true;
    	/**
    	 * Controls the expanded (`true`) or collapsed (`false`) state when on a small screen.
    	 */
    	@HostBinding("class.bx--side-nav--expanded") @Input() expanded = true;
    	/**
    	 * Controls the hidden (`true`) or visible (`false`) state
    	 */
    	@HostBinding("class.bx--side-nav--hidden") @Input() hidden = false;
    	@HostBinding("class.bx--side-nav--rail") @Input() rail = false;
    	@HostBinding("class.bx--side-nav--ux") ux = true;
    	@Input() allowExpansion = false;

    	/**
    	 * NavigationItems from the header navigation component which are displayed on the sidenav when the window
    	 * innerWidth is small enough. Sidenav items and menus are created using the model used to create header
    	 * navigation items.
    	 */
    	@Input() navigationItems: NavigationItem[]

    	constructor(public i18n: I18n) { }

    	toggle() {
    		this.expanded = !this.expanded;
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""