useNavigation API

API reference for the useNavigation hook.

Import

import useNavigation from '@toolpad/core/useNavigation';
// or
import { useNavigation } from '@toolpad/core';

Learn about the difference by reading this guide on minimizing bundle size.

Usage

You can access the current value of the NavigationContext by invoking the hook inside your components:

import { useNavigation } from '@toolpad/core/useNavigation';

function MyComponent() {
  // ...
  const navigation = useNavigation();
  // ...
}

The default Navigation interface exported by @toolpad/core has the following fields:

export type Navigation = NavigationItem[];

export type NavigationItem =
  | NavigationPageItem
  | NavigationSubheaderItem
  | NavigationDividerItem;

export interface NavigationPageItem {
  kind?: 'page';
  segment?: string;
  title?: string;
  icon?: React.ReactNode;
  pattern?: string;
  action?: React.ReactNode;
  children?: Navigation;
}

export interface NavigationSubheaderItem {
  kind: 'header';
  title: string;
}

export interface NavigationDividerItem {
  kind: 'divider';
}