How to customize Nextra header with search option?

[ansi2u]

Hello Team,

I wanted to add a few buttons in the header section of the Nextra docs website along with centering the search box to the middle of the screen and also expand its size.

Though I have the option to include a completely customized header but not able to figure out how to include the search box in case I have a custom code for the header.

Any help or guidance here, please

[skovy]

There are two options that I'm aware of, you can override only the Search component or the entire Navbar. Keep in mind if you override the entire Navbar you have to re-add everything it comes with (styles, logo, search, project link, extras).

Search bar:

// theme.config.js

export default {
  search: {
    component: CustomSearch,
  }
}

Entire navbar:

// theme.config.js

export default {
  navbar: {
    component: CustomNavbar,
  }
}

Another option is to override the Navbar, but then mutate the props yourself and still render the old Navbar. This is likely considered bad practice but is an option. Turbo looks to use it as well: https://github.com/vercel/turbo/blob/8433a321545de30374b5374320625b92c663f5dc/docs/components/Navigation.tsx

[ansi2u]

I'm happy to override the entire Navbar but still confused about how to re-add the search box.