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

jakey___

7 months ago

6

• 

  jacobsfletch

  Payload Team

  7 months ago

  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:

  
  

  
  

  https://github.com/payloadcms/payload/blob/master/src/admin/components/views/collections/Edit/SetStepNav.tsx
  

  
  

  Then you can render the

  StepNav

  component wherever needed

• 

  jakey___

  7 months ago

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