Lighter
Page

Navigation

Props

Component:
RequiredNameTypeDefault valueDescription

Custom UI

By default <Navigation /> looks like this:

<Navigation customUI>
  <NavigationTree />
</Preview>

<Navigation /> UI can be customized with useNavigationContext function which will provide default functionality.

type NavigationProps = {
  children: React.ReactNode;
  activePage: string;
  customUI: boolean;
};

const MyNavigationTree = () => {
  const { children, activePage, customUI }: NavigationProps =
    useNavigationContext();

  return <div />; // UI
};

const MyNavigation = () => (
  <Navigation>
    <MyNavigationTree />
  </Navigation>
);