Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Breadcrumbs Missing After Custom View Implementation?

default discord avatar
zed0547last year
15

Hey

@675733472861487165



The

useStepNav

hook should work for you here in your custom view:

https://payloadcms.com/docs/admin/react-hooks#usestepnav

The default list views use it here:

https://github.com/payloadcms/payload/blob/main/packages/ui/src/views/List/index.tsx#L143-L151
  • default discord avatar
    _niccolas__last year

    Already tried it and unfortunately it's throwing error:

  • default discord avatar
    zed0547last year

    And the

    SetStepNav

    component doesn't work for you either?

  • default discord avatar
    _niccolas__last year

    not really



  • default discord avatar
    zed0547last year

    Can you share how you are defining your custom view



    In config

  • default discord avatar
    _niccolas__last year
    import CustomAnalytics from '@/components/CustomAnalytics'
    import { BeforeOperationHook } from 'node_modules/payload/dist/collections/config/types'
    import { CollectionConfig, PayloadComponent } from 'payload'
    
    export const Analytics: CollectionConfig = {
      slug: 'analytics',
      admin: {
        useAsTitle: 'title',
        group: 'Workspace',
        components: {
          views: {
            list: {
              Component: '/components/CustomAnalytics',
            },
          },
        },
      },
    
      fields: [
        {
          name: 'title',
          type: 'text',
          required: true,
          admin: {
            hidden: false,
          },
        },
      ],
    }




    also when I log nav object, I get undefined so I guess it might be connected to the problem

  • default discord avatar
    zed0547last year

    Yeah, not sure where you are pulling that nav from tbh



    But it doesn't get automatically passed in



    You should use the collection configs plural label



    Like they do here:

    https://github.com/payloadcms/payload/blob/main/packages/ui/src/views/List/index.tsx#L145-L150

    Or some other navItem[]



    I

    think

    that's the issue here

  • default discord avatar
    _niccolas__last year

    I mean even if I manually set string as value, it still returns the same error for the setStepNav, that it's not a function...

  • default discord avatar
    zed0547last year

    Hmm, weird - what Payload version are you using?

  • default discord avatar
    _niccolas__last year

    3.0



    The other guy that you managed to help was facing exactly same problem but for him SetStepNav component worked...

  • default discord avatar
    zed0547last year

    I mean what actual version? 3.0 has had a bunch of releases since launch



    Do other hooks work for you?



    Try useAuth



    Just to test

  • default discord avatar
    _niccolas__last year

    3.35



    @654031862146007055

    fixed it, turns out I had version mismatch :))

  • default discord avatar
    zed0547last year

    Ah very nice!



    Glad you figured it out here

  • default discord avatar
    _niccolas__last year

    Thanks for your help



    It's much appreciated

  • default discord avatar
    zed0547last year

    It's my pleasure, truly

  • default discord avatar
    _niccolas__last year
    :payloadlove:
Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.