Skip to main content
Version: v5

ion-nav

Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.

Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.

Properties​

animated​

DescriptionIf true, the nav should animate the transition of components.
Attributeanimated
Typeboolean
Defaulttrue

animation​

DescriptionBy 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.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) īŊœ undefined
Defaultundefined

root​

DescriptionRoot NavComponent to load
Attributeroot
TypeFunction īŊœ HTMLElement īŊœ ViewController īŊœ null īŊœ string īŊœ undefined
Defaultundefined

rootParams​

DescriptionAny parameters for the root component
Attributeundefined
Typeundefined īŊœ { [key: string]: any; }
Defaultundefined

swipeGesture​

DescriptionIf the nav component should allow for swipe-to-go-back.
Attributeswipe-gesture
Typeboolean īŊœ undefined
Defaultundefined

Events​

NameDescription
ionNavDidChangeEvent fired when the nav has changed components
ionNavWillChangeEvent fired when the nav will change components

Methods​

canGoBack​

DescriptionReturns true if the current view can go back.
SignaturecanGoBack(view?: ViewController īŊœ undefined) => Promise<boolean>

getActive​

DescriptionGet the active view.
SignaturegetActive() => Promise<ViewController īŊœ undefined>

getByIndex​

DescriptionGet the view at the specified index.
SignaturegetByIndex(index: number) => Promise<ViewController īŊœ undefined>

getPrevious​

DescriptionGet the previous view.
SignaturegetPrevious(view?: ViewController īŊœ undefined) => Promise<ViewController īŊœ undefined>

insert​

DescriptionInserts a component into the navigation stack at the specified index. This is useful to add a component at any point in the navigation stack.
Signatureinsert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> īŊœ null īŊœ undefined, opts?: NavOptions īŊœ null īŊœ undefined, done?: TransitionDoneFn īŊœ undefined) => Promise<boolean>

insertPages​

DescriptionInserts an array of components into the navigation 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.
SignatureinsertPages(insertIndex: number, insertComponents: NavComponent[] īŊœ NavComponentWithProps[], opts?: NavOptions īŊœ null īŊœ undefined, done?: TransitionDoneFn īŊœ undefined) => Promise<boolean>

pop​

DescriptionPop a component off of the navigation stack. Navigates back from the current component.
Signaturepop(opts?: NavOptions īŊœ null īŊœ undefined, done?: TransitionDoneFn īŊœ undefined) => Promise<boolean>

popTo​

DescriptionPop to a specific index in the navigation stack.
SignaturepopTo(indexOrViewCtrl: number īŊœ ViewController, opts?: NavOptions īŊœ null īŊœ undefined, done?: TransitionDoneFn īŊœ undefined) => Promise<boolean>

popToRoot​

DescriptionNavigate back to the root of the stack, no matter how far back that is.
SignaturepopToRoot(opts?: NavOptions īŊœ null īŊœ undefined, done?: TransitionDoneFn īŊœ undefined) => Promise<boolean>

push​

DescriptionPush a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams.
Signaturepush<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> īŊœ null īŊœ undefined, opts?: NavOptions īŊœ null īŊœ undefined, done?: TransitionDoneFn īŊœ undefined) => Promise<boolean>

removeIndex​

DescriptionRemoves a component from the navigation stack at the specified index.
SignatureremoveIndex(startIndex: number, removeCount?: number, opts?: NavOptions īŊœ null īŊœ undefined, done?: TransitionDoneFn īŊœ undefined) => Promise<boolean>

setPages​

DescriptionSet 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. Navigation parameters can also be passed to the individual pages in the array.
SignaturesetPages(views: NavComponent[] īŊœ NavComponentWithProps[], opts?: NavOptions īŊœ null īŊœ undefined, done?: TransitionDoneFn īŊœ undefined) => Promise<boolean>

setRoot​

DescriptionSet the root for the current navigation stack to a component.
SignaturesetRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> īŊœ null īŊœ undefined, opts?: NavOptions īŊœ null īŊœ undefined, done?: TransitionDoneFn īŊœ undefined) => Promise<boolean>

CSS Shadow Parts​

No CSS shadow parts available for this component.

CSS Custom Properties​

No CSS custom properties available for this component.

Slots​

No slots available for this component.

View Source