ionic-framework/core/src/components/nav

ion-nav

Nav is a standalone component for loading arbitrary components and pushing to new components on to the stack. Unlike RouterOutlet, Nav is not tied to a particular router. Meaning that if we load a Nav component, and push other components to the stack, they will not affect the apps overall router. This fits use cases where you could have a modal, which needs it's own sub-navigation, but not make it tied to the apps URL.

Properties

Property	Attribute	Description	Type	Default
animated	animated	If true, the nav should animate the transition of components.	boolean	true
animation	--	By default ion-nav animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using AnimateBuilder functions.	((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined	undefined
root	root	Root NavComponent to load	Function | HTMLElement | ViewController | null | string | undefined	undefined
rootParams	--	Any parameters for the root component	undefined | { [key: string]: any; }	undefined
swipeGesture	swipe-gesture	If the nav component should allow for swipe-to-go-back.	boolean | undefined	undefined

Events

Event	Description	Detail
ionNavDidChange	Event fired when the nav has changed components	void
ionNavWillChange	Event fired when the nav will components	void
ionNavWillLoad	Event fired when Nav will load a component	void

Methods

canGoBack(view?: ViewController | undefined) => Promise<boolean>

Returns true or false if the current view can go back

Parameters

Name	Type	Description
view	ViewController | undefined

Returns

Type: Promise<boolean>

getActive() => Promise<ViewController | undefined>

Gets the active view

Returns

Type: Promise<ViewController | undefined>

getByIndex(index: number) => Promise<ViewController | undefined>

Returns the view at the index

Parameters

Name	Type	Description
index	number

Returns

Type: Promise<ViewController | undefined>

getPrevious(view?: ViewController | undefined) => Promise<ViewController | undefined>

Gets the previous view

Parameters

Name	Type	Description
view	ViewController | undefined

Returns

Type: Promise<ViewController | undefined>

insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>

Inserts a component into the nav stack at the specified index. This is useful if you need to add a component at any point in your navigation stack.

Parameters

Name	Type	Description
insertIndex	number
component	T
componentProps	T extends "object" | "ion-icon" | "ion-action-sheet-controller" | "ion-action-sheet" | "ion-alert-controller" | "ion-alert" | "ion-anchor" | "ion-animation-controller" | "ion-app" | "ion-avatar" | "ion-back-button" | "ion-backdrop" | "ion-badge" | "ion-button" | "ion-buttons" | "ion-card-content" | "ion-card-header" | "ion-card-subtitle" | "ion-card-title" | "ion-card" | "ion-checkbox" | "ion-chip" | "ion-col" | "ion-content" | "ion-datetime" | "ion-fab-button" | "ion-fab-list" | "ion-fab" | "ion-footer" | "ion-grid" | "ion-header" | "ion-img" | "ion-infinite-scroll-content" | "ion-infinite-scroll" | "ion-input" | "ion-item-divider" | "ion-item-group" | "ion-item-option" | "ion-item-options" | "ion-item-sliding" | "ion-item" | "ion-label" | "ion-list-header" | "ion-list" | "ion-loading-controller" | "ion-loading" | "ion-menu-button" | "ion-menu-controller" | "ion-menu-toggle" | "ion-menu" | "ion-modal-controller" | "ion-modal" | "ion-nav-pop" | "ion-nav-push" | "ion-nav-set-root" | "ion-nav" | "ion-note" | "ion-picker-column" | "ion-picker-controller" | "ion-picker" | "ion-popover-controller" | "ion-popover" | "ion-radio-group" | "ion-radio" | "ion-range" | "ion-refresher-content" | "ion-refresher" | "ion-reorder-group" | "ion-reorder" | "ion-ripple-effect" | "ion-route-redirect" | "ion-route" | "ion-router-outlet" | "ion-router" | "ion-row" | "ion-searchbar" | "ion-segment-button" | "ion-segment" | "ion-select-option" | "ion-select-popover" | "ion-select" | "ion-skeleton-text" | "ion-slide" | "ion-slides" | "ion-spinner" | "ion-split-pane" | "ion-tab-bar" | "ion-tab-button" | "ion-tab" | "ion-tabs" | "ion-text" | "ion-textarea" | "ion-thumbnail" | "ion-title" | "ion-toast-controller" | "ion-toast" | "ion-toggle" | "ion-toolbar" | "ion-virtual-scroll" | "slot" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } | null | undefined
opts	NavOptions | null | undefined
done	((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController | undefined, leavingView?: ViewController | undefined, direction?: string | undefined) => void) | undefined

Returns

Type: Promise<boolean>

insertPages(insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>

Inserts an array of components into the nav stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view.

Parameters

Name	Type	Description
insertIndex	number
insertComponents	NavComponent[]
opts	NavOptions | null | undefined
done	((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController | undefined, leavingView?: ViewController | undefined, direction?: string | undefined) => void) | undefined

Returns

Type: Promise<boolean>

pop(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>

Call to navigate back from a current component. Similar to push(), you can also pass navigation options.

Parameters

Name	Type	Description
opts	NavOptions | null | undefined
done	((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController | undefined, leavingView?: ViewController | undefined, direction?: string | undefined) => void) | undefined

Returns

Type: Promise<boolean>

popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>

Pop to a specific index in the navigation stack

Parameters

Name	Type	Description
indexOrViewCtrl	ViewController | number
opts	NavOptions | null | undefined
done	((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController | undefined, leavingView?: ViewController | undefined, direction?: string | undefined) => void) | undefined

Returns

Type: Promise<boolean>

popToRoot(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>

Navigate back to the root of the stack, no matter how far back that is.

Parameters

Name	Type	Description
opts	NavOptions | null | undefined
done	((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController | undefined, leavingView?: ViewController | undefined, direction?: string | undefined) => void) | undefined

Returns

Type: Promise<boolean>

push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>

Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams

Parameters

Name	Type	Description
component	T
componentProps	T extends "object" | "ion-icon" | "ion-action-sheet-controller" | "ion-action-sheet" | "ion-alert-controller" | "ion-alert" | "ion-anchor" | "ion-animation-controller" | "ion-app" | "ion-avatar" | "ion-back-button" | "ion-backdrop" | "ion-badge" | "ion-button" | "ion-buttons" | "ion-card-content" | "ion-card-header" | "ion-card-subtitle" | "ion-card-title" | "ion-card" | "ion-checkbox" | "ion-chip" | "ion-col" | "ion-content" | "ion-datetime" | "ion-fab-button" | "ion-fab-list" | "ion-fab" | "ion-footer" | "ion-grid" | "ion-header" | "ion-img" | "ion-infinite-scroll-content" | "ion-infinite-scroll" | "ion-input" | "ion-item-divider" | "ion-item-group" | "ion-item-option" | "ion-item-options" | "ion-item-sliding" | "ion-item" | "ion-label" | "ion-list-header" | "ion-list" | "ion-loading-controller" | "ion-loading" | "ion-menu-button" | "ion-menu-controller" | "ion-menu-toggle" | "ion-menu" | "ion-modal-controller" | "ion-modal" | "ion-nav-pop" | "ion-nav-push" | "ion-nav-set-root" | "ion-nav" | "ion-note" | "ion-picker-column" | "ion-picker-controller" | "ion-picker" | "ion-popover-controller" | "ion-popover" | "ion-radio-group" | "ion-radio" | "ion-range" | "ion-refresher-content" | "ion-refresher" | "ion-reorder-group" | "ion-reorder" | "ion-ripple-effect" | "ion-route-redirect" | "ion-route" | "ion-router-outlet" | "ion-router" | "ion-row" | "ion-searchbar" | "ion-segment-button" | "ion-segment" | "ion-select-option" | "ion-select-popover" | "ion-select" | "ion-skeleton-text" | "ion-slide" | "ion-slides" | "ion-spinner" | "ion-split-pane" | "ion-tab-bar" | "ion-tab-button" | "ion-tab" | "ion-tabs" | "ion-text" | "ion-textarea" | "ion-thumbnail" | "ion-title" | "ion-toast-controller" | "ion-toast" | "ion-toggle" | "ion-toolbar" | "ion-virtual-scroll" | "slot" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } | null | undefined
opts	NavOptions | null | undefined
done	((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController | undefined, leavingView?: ViewController | undefined, direction?: string | undefined) => void) | undefined

Returns

Type: Promise<boolean>

removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>

Removes a page from the nav stack at the specified index.

Parameters

Name	Type	Description
startIndex	number
removeCount	number
opts	NavOptions | null | undefined
done	((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController | undefined, leavingView?: ViewController | undefined, direction?: string | undefined) => void) | undefined

Returns

Type: Promise<boolean>

setPages(views: any[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>

Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller.You can also pass any navigation params to the individual pages in the array.

Parameters

Name	Type	Description
views	any[]
opts	NavOptions | null | undefined
done	((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController | undefined, leavingView?: ViewController | undefined, direction?: string | undefined) => void) | undefined

Returns

Type: Promise<boolean>

setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>

Set the root for the current navigation stack.

Parameters

Name	Type	Description
component	T
componentProps	T extends "object" | "ion-icon" | "ion-action-sheet-controller" | "ion-action-sheet" | "ion-alert-controller" | "ion-alert" | "ion-anchor" | "ion-animation-controller" | "ion-app" | "ion-avatar" | "ion-back-button" | "ion-backdrop" | "ion-badge" | "ion-button" | "ion-buttons" | "ion-card-content" | "ion-card-header" | "ion-card-subtitle" | "ion-card-title" | "ion-card" | "ion-checkbox" | "ion-chip" | "ion-col" | "ion-content" | "ion-datetime" | "ion-fab-button" | "ion-fab-list" | "ion-fab" | "ion-footer" | "ion-grid" | "ion-header" | "ion-img" | "ion-infinite-scroll-content" | "ion-infinite-scroll" | "ion-input" | "ion-item-divider" | "ion-item-group" | "ion-item-option" | "ion-item-options" | "ion-item-sliding" | "ion-item" | "ion-label" | "ion-list-header" | "ion-list" | "ion-loading-controller" | "ion-loading" | "ion-menu-button" | "ion-menu-controller" | "ion-menu-toggle" | "ion-menu" | "ion-modal-controller" | "ion-modal" | "ion-nav-pop" | "ion-nav-push" | "ion-nav-set-root" | "ion-nav" | "ion-note" | "ion-picker-column" | "ion-picker-controller" | "ion-picker" | "ion-popover-controller" | "ion-popover" | "ion-radio-group" | "ion-radio" | "ion-range" | "ion-refresher-content" | "ion-refresher" | "ion-reorder-group" | "ion-reorder" | "ion-ripple-effect" | "ion-route-redirect" | "ion-route" | "ion-router-outlet" | "ion-router" | "ion-row" | "ion-searchbar" | "ion-segment-button" | "ion-segment" | "ion-select-option" | "ion-select-popover" | "ion-select" | "ion-skeleton-text" | "ion-slide" | "ion-slides" | "ion-spinner" | "ion-split-pane" | "ion-tab-bar" | "ion-tab-button" | "ion-tab" | "ion-tabs" | "ion-text" | "ion-textarea" | "ion-thumbnail" | "ion-title" | "ion-toast-controller" | "ion-toast" | "ion-toggle" | "ion-toolbar" | "ion-virtual-scroll" | "slot" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } | null | undefined
opts	NavOptions | null | undefined
done	((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController | undefined, leavingView?: ViewController | undefined, direction?: string | undefined) => void) | undefined

Returns

Type: Promise<boolean>

---

Built with StencilJS