ComponentsLayout
Site Header
Responsive Ghost navigation with search, member actions, and an accessible mobile menu.
Install
npx ghostcn@1.4.0 add site-header --skip-existingUsage
Place this once in your default layout. It uses Ghost’s primary navigation, site branding, search, and member actions. Ghost-owned search and Portal interiors are not affected by buttonClass.
{{> "components/site-header"}}Customize this instance
{{> "components/site-header" class="rounded-xl" buttonClass="bg-purple-700 text-white hover:bg-purple-800"}}Styling parameters
| Parameter | Target |
|---|---|
class | Component root — .ghcn-header |
innerClass | .ghcn-header__inner |
navClass | .ghcn-header__nav, .ghcn-header__mobile-nav |
buttonClass | .ghcn-button |
Styling parameters affect only elements that render. See Style component instances for specificity, dark mode, and preserving customizations.
Installed files
partials/components/site-header.hbsassets/css/components/site-header.css
Was this helpful?