Navbar Component
Props
| Name | Type | Default |
|---|---|---|
children | ReactNodeExtra content after last icon. | |
logoLink | string | booleanSpecifies whether the logo should have a link or provides the URL for the logo’s link. | true |
logo | ReactElementLogo of the website. | |
projectLink | stringURL of the project homepage. | |
projectIcon | ReactNodeIcon of the project link. | <GitHubIcon /> |
chatLink | stringURL of the chat link. | |
chatIcon | ReactNodeIcon of the chat link. | <DiscordIcon /> |
className | stringCSS class name. | |
align | "left" | "right"Aligns navigation links to the specified side. | "right" |
Logo
The logo of the website rendered on the navbar.
<Navbar
logo={
<>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M14.683 14.828a4.055 4.055 0 0 1-1.272.858a4.002 4.002 0 0 1-4.875-1.45l-1.658 1.119a6.063 6.063 0 0 0 1.621 1.62a5.963 5.963 0 0 0 2.148.903a6.035 6.035 0 0 0 3.542-.35a6.048 6.048 0 0 0 1.907-1.284c.272-.271.52-.571.734-.889l-1.658-1.119a4.147 4.147 0 0 1-.489.592z M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10s10-4.486 10-10S17.514 2 12 2zm0 2c2.953 0 5.531 1.613 6.918 4H5.082C6.469 5.613 9.047 4 12 4zm0 16c-4.411 0-8-3.589-8-8c0-.691.098-1.359.264-2H5v1a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2h2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-1h.736c.166.641.264 1.309.264 2c0 4.411-3.589 8-8 8z"
/>
</svg>
<span style={{ marginLeft: '.4em', fontWeight: 800 }}>
My Cool Project
</span>
</>
}
/>Project link
Show a button that links to your project’s homepage on the navbar. By default, it links to Nextra’s GitHub repository.
You can configure projectLink and projectIcon to customize the project link,
for example make it link to your GitLab repository:
<Navbar
projectLink="https://gitlab.com/inkscape/inkscape"
projectIcon={
<svg width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
<path d="m231.9 169.8l-94.8 65.6a15.7 15.7 0 0 1-18.2 0l-94.8-65.6a16.1 16.1 0 0 1-6.4-17.3L45 50a12 12 0 0 1 22.9-1.1L88.5 104h79l20.6-55.1A12 12 0 0 1 211 50l27.3 102.5a16.1 16.1 0 0 1-6.4 17.3Z" />
</svg>
}
/>Chat link
Show a button that links to your project’s forum or other social media on the navbar.
You can configure chatLink and chatIcon to customize the chat link, for
example make it link to your Twitter account:
<Navbar
chatLink="https://twitter.com/shuding_"
chatIcon={
<svg width="24" height="24" viewBox="0 0 248 204">
<path
fill="currentColor"
d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07a50.338 50.338 0 0 0 22.8-.87C27.8 117.2 10.85 96.5 10.85 72.46v-.64a50.18 50.18 0 0 0 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71a143.333 143.333 0 0 0 104.08 52.76 50.532 50.532 0 0 1 14.61-48.25c20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26a50.69 50.69 0 0 1-22.2 27.93c10.01-1.18 19.79-3.86 29-7.95a102.594 102.594 0 0 1-25.2 26.16z"
/>
</svg>
}
/>Menu and custom links
Check out Page Configuration to learn how to add custom menus or links to the navbar.
Toggle Visibility
You can toggle visibility of the <Navbar> on the specific pages by setting theme.navbar property in the _meta.js file:
export default {
'my-page': {
theme: {
navbar: false // Hide navbar on this page
}
}
}