Accordion

A collapsible component for organizing content into expandable sections

The Accordion component provides an interactive way to show and hide content. It supports nested accordions, icons, URL state management, and can be grouped for a unified appearance.

Basic Usage

Default

<Accordion title="What is Mintlify?" defaultOpen={false}>
  <p>
    Mintlify is a platform for creating beautiful documentation for your
    products.
  </p>
</Accordion>

Props

title · ReactNode · required

The title displayed in the accordion header. Prefer using a string value for better compatibility with URL state synchronization and tracking callbacks.

defaultOpen · boolean · required

Whether the accordion should be open by default. Can also accept string "true" for string-based configurations.

description · string

Optional description text displayed below the title in the accordion header.

icon · ReactNode | string

Icon to display in the accordion header. Can be:

• A string icon name (e.g., "code", "rocket") from Font Awesome
• A custom React component/element

iconType · IconType

Type of Font Awesome icon. Options: "solid", "regular", "light", "duotone", "thin", "sharp-solid", "brands"

Only used when icon is a string.

className · string

Additional CSS classes to apply to the accordion container.

children · ReactNode

The content to display inside the accordion when expanded.

trackOpen · (event: { title: string }) => void

Callback fired when the accordion is opened. Receives an event object with the accordion title.

trackClose · (event: { title: string }) => void

Callback fired when the accordion is closed. Receives an event object with the accordion title.

onMount · () => void

Callback fired when the accordion component mounts.

topOffset · string

CSS value for top offset positioning, useful for sticky headers.

getInitialOpenFromUrl · (id: string, parentIds: string[]) => boolean

Function to determine initial open state from URL hash. Use the provided getInitialOpenState() utility function for URL synchronization.

onUrlStateChange · (isOpen: boolean, id: string | undefined, parentIds: string[]) => void

Callback fired when the accordion state changes, for URL synchronization. Use the provided updateAndCopyUrl() utility function.

Examples

With Description

<Accordion
  title="Installation"
  description="Learn how to install Mintlify"
  defaultOpen={false}
>
  <p>Run the following command to install Mintlify:</p>
  <pre>npm install -g mintlify</pre>
</Accordion>

With Icons

Font Awesome Icon

<Accordion
  title="API Reference"
  icon="code"
  iconType="solid"
  defaultOpen={false}
>
  <p>View the complete API reference for all available endpoints.</p>
</Accordion>

With Callbacks

<Accordion
  title="Accordion with Callbacks"
  description="This accordion logs when opened or closed"
  defaultOpen={false}
  trackOpen={(event) => console.log("Accordion opened:", event)}
  trackClose={(event) => console.log("Accordion closed:", event)}
  onMount={() => console.log("Accordion mounted")}
>
  <p>Check the browser console to see the logs.</p>
</Accordion>

Nested Accordions

<Accordion title="Parent Accordion" defaultOpen={true}>
  <p className="mb-3">This is the parent accordion content.</p>
  <div className="space-y-3">
    <Accordion title="Nested Child 1" defaultOpen={false}>
      <p>This is nested inside the parent accordion.</p>
    </Accordion>
    <Accordion title="Nested Child 2" defaultOpen={false}>
      <p>You can nest accordions to create hierarchical content.</p>
    </Accordion>
  </div>
</Accordion>

URL State Management

import { Accordion, getInitialOpenState, updateAndCopyUrl } from '@mintlify/components';

function MyComponent() {
  const getInitialOpen = getInitialOpenState();
  const handleUrlChange = updateAndCopyUrl();

  return (
    <>
      <Accordion
        title="URL Synced Accordion 1"
        description="This accordion state is reflected in the URL"
        defaultOpen={false}
        getInitialOpenFromUrl={getInitialOpen}
        onUrlStateChange={handleUrlChange}
      >
        <p>When you open this accordion, the URL hash will update to include its ID.</p>
        <p>Try refreshing the page - the accordion will maintain its state!</p>
      </Accordion>
      <Accordion
        title="URL Synced Accordion 2"
        description="This one also syncs with the URL"
        defaultOpen={false}
        getInitialOpenFromUrl={getInitialOpen}
        onUrlStateChange={handleUrlChange}
      >
        <p>Each accordion has its own unique ID in the URL.</p>
      </Accordion>
    </>
  );
}

The URL state management feature automatically copies the URL to the clipboard when an accordion is opened, making it easy to share direct links to specific sections.

Accordion Group

Use Accordion.Group to visually group multiple accordions together without spacing between them.

Props

children · ReactNode · required

Multiple Accordion components to group together.

className · string

Additional CSS classes to apply to the accordion group container.

Example

<Accordion.Group>
  <Accordion title="First Accordion" defaultOpen={true}>
    <p>Content of the first accordion.</p>
  </Accordion>
  <Accordion title="Second Accordion" defaultOpen={false}>
    <p>Content of the second accordion.</p>
  </Accordion>
  <Accordion title="Third Accordion" defaultOpen={false}>
    <p>Content of the third accordion.</p>
  </Accordion>
</Accordion.Group>

With Icons and Descriptions

<Accordion.Group>
  <Accordion
    title="Getting Started"
    description="Basic introduction and setup"
    icon="rocket"
    iconType="solid"
    defaultOpen={false}
  >
    <p>Getting started content here.</p>
    <ol>
      <li>Install the package</li>
      <li>Configure your project</li>
      <li>Start building</li>
    </ol>
  </Accordion>
  <Accordion
    title="Advanced Features"
    description="Detailed guide to advanced functionality"
    icon="gear"
    iconType="solid"
    defaultOpen={false}
  >
    <p>Advanced features content here.</p>
  </Accordion>
  <Accordion
    title="Troubleshooting"
    description="Common issues and solutions"
    icon="circle-question"
    iconType="regular"
    defaultOpen={false}
  >
    <p>Troubleshooting content here.</p>
  </Accordion>
</Accordion.Group>

Styling

The accordion component automatically adapts to light and dark themes. You can customize the appearance using the className prop:

<Accordion
  title="Custom Styled Accordion"
  className="shadow-lg"
  defaultOpen={false}
>
  <p>This accordion has a custom shadow applied.</p>
</Accordion>

Accessibility

The Accordion component includes built-in accessibility features:

• Uses the native HTML <details> and <summary> elements
• Proper ARIA attributes (aria-labelledby, role="region")
• Keyboard navigation support
• Focus management
• Unique IDs for each accordion based on slugified titles