Skip to main content

Customising topic controls

Topic pages in this template use a swizzled layout (src/theme/DocItem/Layout/) and small React components for the right-hand TOC. Swizzling is a Docusaurus term for customising.

This topic covers the controls you are most likely to change for a customer portal.

ControlWhere it lives
On this page: labelsrc/theme/DocItem/Layout/index.js (+ styles.module.css)
Feedback and print buttonssrc/components/DocActions/, FeedbackButton/, PrintButton/
Previous / next paginationDisabled. To get them back, restore DocItemPaginator in the layout
Advanced

Edit these files only when you are adapting the portal layout. Day-to-day topic authors usually only need front matter such as hide_table_of_contents.

On this page label​

Above the desktop TOC, the layout renders a fixed label:

src/theme/DocItem/Layout/index.js
<p className={clsx(styles.onThisPage, 'no-print')}>On this page:</p>

Change the text​

Edit the string in that <p> (for example On this page without the colon, or a translated label).

Change the look​

Update .onThisPage in src/theme/DocItem/Layout/styles.module.css (size, weight, colour). The colour currently follows --ifm-toc-link-color so it matches TOC links.

Remove the label only​

Delete the <p …>On this page:</p> line (keep {docTOC.desktop} so the TOC list still shows).

Hide the whole TOC (label and list)​

On one topic, use front matter:

---
title: Example
hide_table_of_contents: true
---

To change which heading levels appear in the TOC, see Editing sidebar and TOC (tableOfContents in docusaurus.config.js).

Feedback and print buttons​

Both buttons are rendered by DocActions, which appears in the right column on desktop and above the content on smaller screens:

src/components/DocActions/index.js
export default function DocActions() {
  return (
    <div className={`no-print ${styles.docActions}`}>
      <FeedbackButton />
      <PrintButton />
    </div>
  );
}

Shared button chrome (size, border, hover) lives in src/components/PrintButton/styles.module.css. Feedback reuses those styles.

Change the feedback action​

Open src/components/FeedbackButton/index.js.

Use the sample below to get the following result:

  • Replace the Jira URL with a mailto: link.
  • Use encodeURIComponent for the subject (and optional body) so spaces and special characters are safe.
  • Include the current page title from metadata.title.

The minimum required change is to replace the example email address with an existing one.

src/components/FeedbackButton/index.js
export default function FeedbackButton() {
  const {metadata} = useDoc();
  const subject = encodeURIComponent(
    `Docs feedback: ${metadata.title}`,
  );
  const href = `mailto:docs-feedback@example.com?subject=${subject}`;

  return (
    <a
      className={styles.actionButton}
      href={href}
      aria-label="Send feedback by email"
      title="Send feedback by email">
      <FeedbackIcon />
    </a>
  );
}

Optional: add a short body that also names the page (and, if useful, its URL):

const body = encodeURIComponent(
  `Feedback on “${metadata.title}”\n\nPage: ${typeof window !== 'undefined' ? window.location.href : metadata.permalink}\n\n`,
);
const href = `mailto:docs-feedback@example.com?subject=${subject}&body=${body}`;

Change the print action​

Open src/components/PrintButton/index.js.

  • Default behaviour is onClick={() => window.print()}.
  • Point elsewhere by changing the handler (or replace the <button> with a link) if print should open a custom URL or tool.
  • Update aria-label and title to match.

Change an icon​

Each file defines a small SVG component (FeedbackIcon / PrinterIcon). Replace the <path> (or the whole SVG) with your icon. Keep aria-hidden="true" on decorative icons; the accessible name stays on the button/link.

Hide one or both buttons​

  • Hide both: remove <DocActions /> from src/theme/DocItem/Layout/index.js (desktop column and the mobile block).
  • Hide one: remove <FeedbackButton /> or <PrintButton /> from src/components/DocActions/index.js.
  • CSS-only (quick): target .docActions or a single button in src/css/custom.css with display: none if you need a temporary hide without touching JSX.

Previous and next buttons​

Classic Docusaurus shows Previous / Next under the article via <DocItemPaginator />. This template’s swizzled layout doesn't render that component, so those links are off by default.

Re-enable pagination​

  1. In src/theme/DocItem/Layout/index.js, import the paginator:
import DocItemPaginator from '@theme/DocItem/Paginator';
  1. Place the paginator tag after </article>, inside docItemContainer (same position as in the classic theme):
<div className={styles.docItemContainer}>
  <article>
    {/* breadcrumbs, content, footer… */}
  </article>
  <DocItemPaginator />
</div>
  1. Save and refresh.
    The navigation order follows the main sidebar.
tip

Pagination respects sidebar order. If previous/next look wrong, check the doc’s place in sidebars.js.

Related content​

Last updated on

On this page: