Collapse

A content area which can be collapsed and expanded.

When To Use

Can be used to group or hide complex regions to keep the page clean.
Accordion is a special kind of Collapse, which allows only one panel to be expanded at a time.

// works when >= 5.6.0, recommended ✅
const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

const items: CollapseProps['items'] = [
  {
    key: '1',
    label: 'This is panel header 1',
    children: <p>{text}</p>,
  },
  {
    key: '2',
    label: 'This is panel header 2',
    children: <p>{text}</p>,
  },
  {
    key: '3',
    label: 'This is panel header 3',
    children: <p>{text}</p>,
  },
];

<Collapse items={items} defaultActiveKey={['1']} />;

// works when <5.6.0 , deprecated when >=5.6.0  🙅🏻‍♀️

<Collapse defaultActiveKey={['1']} onChange={onChange}>
  <Panel header="This is panel header 1" key="1">
    <p>{text}</p>
  </Panel>
  <Panel header="This is panel header 2" key="2">
    <p>{text}</p>
  </Panel>
  <Panel header="This is panel header 3" key="3">
    <p>{text}</p>
  </Panel>
</Collapse>;

Examples

Collapse

By default, any number of panels can be expanded at a time. The first panel is expanded in this example.

Size

Namu Design supports a default collapse size as well as a large and small size.

If a large or small collapse is desired, set the size property to either large or small respectively. Omit the size property for a collapse with the default size.

Accordion

In accordion mode, only one panel can be expanded at a time.

Nested panel

Collapse is nested inside the Collapse.

Borderless

A borderless style of Collapse.

Custom Panel

Customize the background, border, margin styles and icon for each panel.

No arrow

You can hide the arrow icon by passing showArrow={false} to CollapsePanel component.

Extra node

Render extra element in the top-right corner of each panel.

Ghost Collapse

Making collapse's background to transparent.

Collapsible

Specify the trigger area of collapsible by collapsible.

API

Common props ref：Common props

Collapse

Property	Description	Type	Default	Version
accordion	If true, Collapse renders as Accordion	boolean	false
activeKey	Key of the active panel	string[] \| string number[] \| number	No default value. In `accordion` mode, it's the key of the first panel
bordered	Toggles rendering of the border around the collapse block	boolean	true
collapsible	Specify whether the panels of children be collapsible or the trigger area of collapsible	`header` \| `icon` \| `disabled`	-	4.9.0
defaultActiveKey	Key of the initial active panel	string[] \| string number[] \| number	-
destroyInactivePanel	Destroy Inactive Panel	boolean	false
expandIcon	Allow to customize collapse icon	(panelProps) => ReactNode	-
expandIconPosition	Set expand icon position	`start` \| `end`	-	4.21.0
ghost	Make the collapse borderless and its background transparent	boolean	false	4.4.0
size	Set the size of collapse	`large` \| `middle` \| `small`	`middle`	5.2.0
onChange	Callback function executed when active panel is changed	function	-
items	collapse items content	ItemType	-	5.6.0

Collapse.Panel

>= 5.6.0 configure the panel by `items`.

Property	Description	Type	Default	Version
collapsible	Specify whether the panel be collapsible or the trigger area of collapsible	`header` \| `icon` \| `disabled`	-	4.9.0 (icon: 4.24.0)
extra	The extra element in the corner	ReactNode	-
forceRender	Forced render of content on panel, instead of lazy rendering after clicking on header	boolean	false
header	Title of the panel	ReactNode	-
key	Unique key identifying the panel from among its siblings	string \| number	-
showArrow	If false, panel will not show arrow icon. If false, collapsible can't be set as icon	boolean	true

Design Token

Global Token

When To Use

Can be used to group or hide complex regions to keep the page clean.

Accordion is a special kind of Collapse, which allows only one panel to be expanded at a time.

// works when >= 5.6.0, recommended ✅
const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

const items: CollapseProps['items'] = [
  {
    key: '1',
    label: 'This is panel header 1',
    children: <p>{text}</p>,
  },
  {
    key: '2',
    label: 'This is panel header 2',
    children: <p>{text}</p>,
  },
  {
    key: '3',
    label: 'This is panel header 3',
    children: <p>{text}</p>,
  },
];

<Collapse items={items} defaultActiveKey={['1']} />;

// works when <5.6.0 , deprecated when >=5.6.0  🙅🏻‍♀️

<Collapse defaultActiveKey={['1']} onChange={onChange}>
  <Panel header="This is panel header 1" key="1">
    <p>{text}</p>
  </Panel>
  <Panel header="This is panel header 2" key="2">
    <p>{text}</p>
  </Panel>
  <Panel header="This is panel header 3" key="3">
    <p>{text}</p>
  </Panel>
</Collapse>;

API

Common props ref：Common props

Collapse

Property	Description	Type	Default	Version
accordion	If true, Collapse renders as Accordion	boolean	false
activeKey	Key of the active panel	string[] \| string number[] \| number	No default value. In `accordion` mode, it's the key of the first panel
bordered	Toggles rendering of the border around the collapse block	boolean	true
collapsible	Specify whether the panels of children be collapsible or the trigger area of collapsible	`header` \| `icon` \| `disabled`	-	4.9.0
defaultActiveKey	Key of the initial active panel	string[] \| string number[] \| number	-
destroyInactivePanel	Destroy Inactive Panel	boolean	false
expandIcon	Allow to customize collapse icon	(panelProps) => ReactNode	-
expandIconPosition	Set expand icon position	`start` \| `end`	-	4.21.0
ghost	Make the collapse borderless and its background transparent	boolean	false	4.4.0
size	Set the size of collapse	`large` \| `middle` \| `small`	`middle`	5.2.0
onChange	Callback function executed when active panel is changed	function	-
items	collapse items content	ItemType	-	5.6.0

Collapse.Panel

Property

Description

Type

Default

Version

collapsible

Specify whether the panel be collapsible or the trigger area of collapsible

header | icon | disabled

4.9.0 (icon: 4.24.0)

extra

The extra element in the corner

ReactNode

forceRender

Forced render of content on panel, instead of lazy rendering after clicking on header

boolean

false

header

Title of the panel

ReactNode

key

Unique key identifying the panel from among its siblings

string | number

showArrow

If false, panel will not show arrow icon. If false, collapsible can't be set as icon

boolean

true

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

CollapseChangelog

CollapseChangelog

When To Use

Examples

API

Collapse

Collapse.Panel

Design Token

Global Token

When To Use

Examples

API

Collapse

Collapse.Panel

Design Token

Global Token

Collapse

Collapse