# NavigationContext

Gets a reference to a Lightning web component's navigation context (its closest ancestor router container) for use with the [`generateUrl()`](/docs/platform/lwr/references/csr-reference/generateurl.md) and [`navigate()`](/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](/docs/platform/lwr/guide/lwr-routing-example-simple.md#navigate)