How to create a custom NavGroup?

backpain1035last year

4

• 

  zed0547last year

  Hey

  @759432756089978930

  ,

  
  
  

  Not too sure about the error, but I can gaurentee you that the

  NavGroup

  component is not a server component

  
  
  

  See exported here:

  https://github.com/payloadcms/payload/blob/beta/packages/ui/src/exports/client/index.ts#L78
  
  

  See actual component here:

  https://github.com/payloadcms/payload/blob/beta/packages/ui/src/elements/NavGroup/index.tsx
  
  

  Try adding

  'use client'

  at the top of your component

• 

  backpain1035last year

  yeah, i noticed, its not a server component because of the 'use client'; still didn't know to solve the problem

  
  
  https://github.com/payloadcms/payload/blob/59ff8c18f5ff602e872cc65ea03e68bf8071b20b/packages/ui/src/elements/NavGroup/index.tsx#L31

  you can check there is a getPreference here, and that'is where the error is coming from

• 

  zed0547last year

  In your custom component file, try adding a

  use client

  directive

• 

  backpain1035last year

  import Link from "next/link";
  import { NavGroup } from '@payloadcms/ui'
  import { ServerProps } from "payload";
  
  
  const CustomNavGroup = ({ payload }: ServerProps) => {
    const { admin } = payload.config.routes;
  
    return (
      <NavGroup label={"Custom"}>
        <Link className="nav__link" href={`${admin}/custompage`}>
          <span className="nav__link-label">Custom Page</span>
        </Link>
      </NavGroup>
    )
  };
  
  export default CustomNavGroup;