--- title: CollapsibleLayoutItem source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/structure/CollapsibleLayoutItem --- Child element of the `` component used only for left or right side areas, with the ability to collapse them. Can be used as a "controlled" component (i.e. by passing the `collapsed` boolean prop), or by default it will manage its own (un)collapsed state. It takes a `triggerType` prop, allowing you to choose the inbuilt triggers – the side area will include a button which allows the user to collapse the area and then expand it again – or custom, meaning you are using your own UI element elsewhere to control the (un)collapsed state. See [the `` docs](https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/structure/Layout/#examples) for example usage. The `` component only supports one child of each `type`, shared between `` and ``. ### Usage ```js import { CollapsibleLayoutItem } from 'nr1' ``` ### Props | `children` REQUIRED node | Content to display inside the child item. | | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` string | Appends class names to the component. | | `collapsed` boolean | Set this prop to control the collapsed state of the split from your own external control. | | `defaultCollapsed` boolean | Not actually a "default" – this only sets the _initial_ collapsed state of the split. Defaults to `false`. | | `onChangeCollapsed` function | This function will be called whenever the user clicks the default trigger button to collapse or expand the split. If you are controlling the state of the component, use this to set the value of the `collapsed` prop. | | `sizeType` enum | Determines the width of the layout item. We recommend you use the small size for navigation purposes (ex. sidebars) and the medium size for showing contextualized information (ex. activity stream).Size type only works on SPLIT_LEFT and SPLIT_RIGHT items. CollapsibleLayoutItem.SIZE_TYPE.MEDIUM, CollapsibleLayoutItem.SIZE_TYPE.SMALL, | | `style` object | Inline style for custom styling. | | `testId` string | Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, `my-nerdpack.some-element`. **Note:** You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass a `e2e-test` query parameter to the URL. | | `triggerType` REQUIREDenum | Choose whether to use the inbuilt trigger buttons to allow collapsing/expanding the split, or your own custom ones (e.g. a switch outside the layout or a custom button inside the layout). It is strongly recommended not to mix these patterns, i.e. do not choose `CollapsibleLayoutItem.TRIGGER_TYPE.INBUILT` _and_ also provide your own custom triggers. CollapsibleLayoutItem.TRIGGER_TYPE.CUSTOM, CollapsibleLayoutItem.TRIGGER_TYPE.INBUILT, | | `type` REQUIREDenum | Type can be:_ Split left — Render as a fixed area on the left of the layout. _ Split right — Render as a fixed area on the right of the layout. CollapsibleLayoutItem.TYPE.SPLIT_LEFT, CollapsibleLayoutItem.TYPE.SPLIT_RIGHT, |