I'm looking through the payload source code and the Eyebrow component seems to just intelligently produce a breadcrumb when placed in a component. However, in my implementation, it just says "Dashboard".
Actually, what I'm now finding is that something about most other pages is different than the custom route I've created. The state of the eyebrow seems to hold on to any previous page when you go from it to the custom route.
You have to explicitly set the step nav using the
setStepNav
method available via the
useStepNav
hook, as long as your custom view provides the context. The default edit view uses this
SetStepNav
component to do exactly that, check it out:
Then you can render the
StepNav
component wherever needed
Ohhhhh, thank you. Will def check that out
Finally got back to this. Took some back and forth in the source code but it wasn't too difficult to figure out after your help
@808734492645785600. Much appreciated.
Here's a stripped down example of how to use it in case someone in the future searches community-help
import React, { useEffect } from 'react'
import { useStepNav } from 'payload/components/hooks'
import { Eyebrow } from 'payload/components/elements'
import { DefaultTemplate } from 'payload/components/templates'
const ExampleCustomUi :AdminView = () => {
const { setStepNav } = useStepNav()
useEffect(() => {
setStepNav([{
label: 'Your Title Here',
}])
}, [setStepNav])
return (
<DefaultTemplate>
<Eyebrow />
</DefaultTemplate>
)
}
export default ExampleCustomUi
Star
Discord
online
Get dedicated engineering support directly from the Payload team.