---
schema_version: "1"
id: 0239ba80609fec86348a8edc4ec8b9d2d270e54650a4449d088ef0df8041da38
title: NavigationContext
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lwr-node/lwr/references/csr-reference/navigationcontext.md
canonical_url: https://developer.salesforce.com/docs/platform/lwr/references/csr-reference/navigationcontext.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 54223736a151496195e6b01d91d25e24507cf5eeaf403bc0e7d69b35ed1de6b4
products:
  - Lightning Web Runtime
---
# NavigationContext

Gets a reference to a Lightning web component's navigation context (its closest ancestor router container) for use with the [`generateUrl()`](https://developer.salesforce.com/docs/platform/lwr/references/csr-reference/generateurl.md) and [`navigate()`](https://developer.salesforce.com/docs/platform/lwr/references/csr-reference/navigate.md) APIs.

## Properties

None

## Syntax

```javascript
import { LightningElement, wire } from "lwc";
import { NavigationContext } from "lwr/navigation";

export default class Example extends LightningElement {
  @wire(NavigationContext)
  property;
}
```

## Returns

- A `ContextId`, which is an opaque ID for the parent router container nearest to the component.

## Example

```javascript
import { LightningElement, wire } from 'lwc';
import { NavigationContext, navigate } from 'lwr/navigation';

export default class HomeLink extends LightningElement {
    // Use the NavigationContext wire to obtain a Context Id value and assign it to the navContext property
    @wire(NavigationContext)
    navContext;

    navigateHome(event) {
        // Navigate when the button is clicked
        event.preventDefault();
        // The navigate() API uses the ContextId value
        if (this.navContext) {
            navigate(this.navContext, {
                type: 'home',
                attributes: { format: 'list' },
                state: { dark-mode: 'true' },
            });
        }
    }
}
```

```html
<template>
  <button onclick="{navigateHome}">Home</button>
</template>
```

**See Also**

- [Simple Routing Example: Navigate](https://developer.salesforce.com/docs/platform/lwr/guides/lwr-routing-example-simple.md#navigate)