DynamicNav

Recommended: JavaScript SDK with React Hooks

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) to get started.

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.

🚧 A duplicate widget is displayed.

Make sure you do not render DynamicWidget along with DynamicNav. These components should not be used together.

Usage

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>
  );
};