> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# DynamicNav

<Card title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](/javascript/reference/react-quickstart) to get started.
</Card>

### Summary

The DynamicNav component is responsible for rendering the network picker and the connected account field.

Typically, if you want to use the DynamicNav, we recommend using the DynamicWidget since it's connected to the DynamicUserProfile.

<Note>
  ### 🚧 A duplicate widget is displayed.

  Make sure you do not render `DynamicWidget` along with `DynamicNav`. These components should not be used together.
</Note>

### Usage

```JavaScript theme={"system"}
import React from "react";

import {
  useDynamicContext,
  DynamicNav
} from "@dynamic-labs/sdk-react-core";

export const AppNavigation = () => {
  const { user } = useDynamicContext();
  return (
    <nav className="nav">
        <a className="nav__element" href="/">Home</a>
        {
            user && (
                <div className="nav_element">
                <DynamicNav />
            </div>
            )
        }
    </nav>
  );
};
```