How does one use the Eyebrow component in a custom route?

default discord avatar
jakey___last year

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.

  • discord user avatar
    last year

    You have to explicitly set the step nav using the


    method available via the


    hook, as long as your custom view provides the context. The default edit view uses this


    component to do exactly that, check it out:

    Then you can render the


    component wherever needed

  • default discord avatar
    jakey___last year

    @jacobsfletch 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 @jacobsfletch . 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(() => {
                label: 'Your Title Here',
        }, [setStepNav])
        return (
                <Eyebrow />
    export default ExampleCustomUi
Star on GitHub


Chat on Discord



Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.