ComponentsPublishing
Post Navigation
Accessible chronological previous/next post links, with no dead links at either end.
Install
npx ghostcn@1.4.0 add post-navigation --skip-existingUsage
Use inside {{#post}}. Previous and next follow Ghost’s chronological post navigation. Missing neighbors render no link; the block is hidden when neither is available.
{{#post}}
{{> "components/post-navigation"}}
{{/post}}Customize this instance
{{#post}}
{{> "components/post-navigation" class="my-6" titleClass="text-purple-700 dark:text-purple-300"}}
{{/post}}Styling parameters
| Parameter | Target |
|---|---|
class | Component root — .ghcn-post-navigation |
cardClass | .ghcn-post-navigation__link |
titleClass | .ghcn-post-navigation__title |
labelClass | .ghcn-post-navigation__label |
Styling parameters affect only elements that render. See Style component instances for specificity, dark mode, and preserving customizations.
Installed files
partials/components/post-navigation.hbsassets/css/components/post-navigation.css
Was this helpful?