Navbar, Footer, and Other nextra-theme-docs Components

nextra-theme-docs ships several standalone components alongside the main <Layout> wrapper. Most are designed to be instantiated once in your root layout and passed as props, but they can also be imported and used anywhere in your application. This page covers every named export from the package. The <Navbar> component renders a sticky top navigation bar with a logo, optional project/chat icon links, and a slot for custom children.

import { Navbar } from 'nextra-theme-docs'

Pass the instantiated element to <Layout navbar={...}>.

Props

logo

ReactNode

required

The logo element rendered on the left side of the navbar (or right when align="left"). Can be any React content — an image, SVG, or text node.

<Navbar logo={<img src="/logo.svg" alt="Acme" height={28} />} />

logoLink

string | boolean

default:"true"

Controls whether the logo is wrapped in a link. Pass true (default) to link to /, a custom string to link to a different URL, or false to render the logo without any link.

projectLink

string

URL of the project’s primary repository or homepage. When provided, a GitHub icon button is rendered. Defaults to no button when omitted.

projectIcon

ReactNode

default:"<GitHubIcon />"

Custom icon element for the project link button. Replace with a GitLab, npm, or any other SVG when your project lives outside GitHub.

chatLink

string

URL to a community chat or social link (Discord, X/Twitter, Slack, etc.). A Discord icon button is rendered when this prop is set.

chatIcon

ReactNode

default:"<DiscordIcon />"

Custom icon element for the chat link button.

align

'left' | 'right'

default:"'right'"

Side to which navigation icon links are aligned inside the navbar.

className

string

Additional CSS class names applied to the <nav> element.

children

ReactNode

Extra elements rendered after the icon link buttons — useful for adding a custom search bar, a CTA button, or additional icon links.

Example

app/layout.tsx

import { Navbar } from 'nextra-theme-docs'

const navbar = (
  <Navbar
    logo={<b>My Docs</b>}
    projectLink="https://github.com/my-org/my-project"
    chatLink="https://discord.gg/my-server"
    align="right"
  />
)

The <Footer> component renders the site footer. It already contains locale and theme switchers internally; pass children for copyright text or additional footer content.

import { Footer } from 'nextra-theme-docs'

Props

children

ReactNode

Content rendered inside the <footer> element — typically copyright text and links. When children is omitted, only the theme/locale switcher row is shown.

className

string

Additional CSS class names applied to the inner <footer> element.

<Footer> accepts all standard HTML <footer> element attributes in addition to the documented props above, since it spreads ComponentProps<'footer'>.

Example

app/layout.tsx

import { Footer } from 'nextra-theme-docs'

const footer = (
  <Footer>
    MIT {new Date().getFullYear()} ©{' '}
    <a href="https://my-company.com" target="_blank">My Company</a>.
  </Footer>
)

NotFoundPage

<NotFoundPage> provides the default content for a 404 error page. It renders a centred “Page Not Found” heading and a link that opens a pre-filled GitHub issue, helping visitors report broken links.

import { NotFoundPage } from 'nextra-theme-docs'

Create a app/not-found.tsx file and render this component:

app/not-found.tsx

import { NotFoundPage } from 'nextra-theme-docs'

export default function NotFound() {
  return <NotFoundPage />
}

Props

content

ReactNode

default:"'Submit an issue about broken link'"

Label text of the issue-submission link rendered below the heading. Set to null to suppress the link entirely.

labels

string

default:"'bug'"

GitHub issue label(s) pre-applied to the new issue created when a visitor clicks the link. Separate multiple labels with commas.

children

ReactNode

default:"<H1>404: Page Not Found</H1>"

Top content of the 404 page. Defaults to a styled <h1> heading. Replace to customise the heading text or add an illustration.

className

string

Additional CSS class names applied to the wrapping <div>.

ThemeSwitch

A standalone dark/light/system theme selector dropdown. By default the <Footer> already embeds this component, but you can also render it in a custom toolbar or page header.

import { ThemeSwitch } from 'nextra-theme-docs'

Props

lite

boolean

When true, the current theme label text is hidden and only the icon is shown, producing a compact icon-only button suitable for tight layouts.

className

string

Additional CSS class names applied to the selector wrapper.

ThemeSwitch respects the darkMode flag from <Layout>. When darkMode is false, the component renders nothing.

LocaleSwitch

A locale/language selector dropdown. It reads the i18n configuration from the theme config store and redirects the browser to the same path in the selected locale.

import { LocaleSwitch } from 'nextra-theme-docs'

LocaleSwitch only renders when the i18n prop passed to <Layout> is a non-empty array. If i18n is empty (the default), the component returns null.

Props

lite

boolean

When true, only the globe icon is shown — the locale display name is hidden. Useful inside compact navbars.

className

string

Additional CSS class names applied to the selector wrapper.

LastUpdated

Renders the last-updated date for the current page. Used in the TOC panel to communicate content freshness. The component automatically picks up the active locale when i18n is configured.

import { LastUpdated } from 'nextra-theme-docs'

Pass a custom element to <Layout lastUpdated={...}> to control locale and label text:

<Layout
  lastUpdated={
    <LastUpdated locale="de">Zuletzt aktualisiert am</LastUpdated>
  }
>

Props

date

Date

The date to display. When not provided (or undefined), the component renders nothing. Nextra automatically injects the git-derived last-modified date.

locale

string

default:"'en'"

A BCP 47 locale string used to format the date via Date.prototype.toLocaleDateString. When i18n is configured, the active route locale is used instead.

children

ReactNode

default:"'Last updated on'"

Prefix text rendered before the formatted date.

Hooks

nextra-theme-docs exposes several React hooks for reading and updating theme state inside client components.

`useThemeConfig()`

Returns the full, resolved theme configuration object — the merged result of all props passed to <Layout>.

import { useThemeConfig } from 'nextra-theme-docs'

'use client'
import { useThemeConfig } from 'nextra-theme-docs'

export function MyComponent() {
  const { darkMode, sidebar, toc } = useThemeConfig()
  return <span>Sidebar collapse level: {sidebar.defaultMenuCollapseLevel}</span>
}

`useConfig()`

Returns normalised data for the current page derived from the page map.

import { useConfig } from 'nextra-theme-docs'

normalizePagesResult

NormalizePagesResult

The full result of normalizePages() for the active route, including activeType, activeThemeContext, flatDirectories, and more.

hideSidebar

boolean

true when the sidebar should be hidden on the current page — either because the active page’s themeContext.sidebar is false, or the page type is 'page'.

`useMenu()` / `setMenu()`

Controls the mobile navigation menu open state.

import { useMenu, setMenu } from 'nextra-theme-docs'

Returns true when the mobile menu is open.

'use client'
import { setMenu, useMenu } from 'nextra-theme-docs'

export function MenuToggle() {
  const isOpen = useMenu()
  return (
    <button onClick={() => setMenu(v => !v)}>
      {isOpen ? 'Close' : 'Open'} menu
    </button>
  )
}

`useTheme()`

Re-exported directly from next-themes. Returns { theme, resolvedTheme, setTheme, ... }.

import { useTheme } from 'nextra-theme-docs'

'use client'
import { useTheme } from 'nextra-theme-docs'

export function ThemeIndicator() {
  const { resolvedTheme } = useTheme()
  return <span>Current theme: {resolvedTheme}</span>
}

Link

A styled anchor component that wraps the Anchor primitive from nextra/components and applies the docs theme’s primary-color underline styles. Use it inside MDX content or custom components whenever you want a link that automatically matches the docs theme.

import { Link } from 'nextra-theme-docs'

Link accepts all the same props as Anchor (and therefore <a>), including href, target, rel, and className. Any className you provide is merged with the theme’s default link styles.

import { Link } from 'nextra-theme-docs'

export function MyComponent() {
  return (
    <Link href="https://nextra.site" target="_blank">
      Visit Nextra
    </Link>
  )
}

`useMDXComponents()`

Returns the complete MDX component map used by the docs theme — headings, links, code blocks, tables, callouts, and more. Pass it to your mdx-components.tsx file to apply docs-theme prose styles to all MDX content in your project.

import { useMDXComponents } from 'nextra-theme-docs'

Usage

mdx-components.tsx

import { useMDXComponents as getDocsComponents } from 'nextra-theme-docs'
import type { MDXComponents } from 'mdx/types'

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...getDocsComponents(components),
    // Override or add individual components here
  }
}

Core API

Docs Theme API

Blog Theme API

Navbar, Footer, and Other nextra-theme-docs Components

Navbar

Props

Example

Footer

Props

Example

NotFoundPage

Props

ThemeSwitch

Props

LocaleSwitch

Props

LastUpdated

Props

Hooks

`useThemeConfig()`

`useConfig()`

`useMenu()` / `setMenu()`

`useTheme()`

Link

`useMDXComponents()`

Usage

Build docs developers (and LLMs) love

Core API

Docs Theme API

Blog Theme API

Documentation Index

​Navbar

​Props

​Example

​Footer

​Props

​Example

​NotFoundPage

​Props

​ThemeSwitch

​Props

​LocaleSwitch

​Props

​LastUpdated

​Props

​Hooks

​useThemeConfig()

​useConfig()

​useMenu() / setMenu()

​useTheme()

​Link

​useMDXComponents()

​Usage

Build docs developers (and LLMs) love

Navbar

Props

Example

Footer

Props

Example

NotFoundPage

Props

ThemeSwitch

Props

LocaleSwitch

Props

LastUpdated

Props

Hooks

`useThemeConfig()`

`useConfig()`

`useMenu()` / `setMenu()`

`useTheme()`

Link

`useMDXComponents()`

Usage