> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/apptemplate/code/subcomponents.md).

# SubComponents

### Page

The following components extend the native [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) API. That's why the `className` prop is not included in the tables.

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

This subcomponent will always receive the following subcomponents:

* **PageContent**
* **PageContentFooter**
* **PageHeader**
* **PageHeaderActions**
* **PageHeaderNavigation**
* **PageHeaderNavigationButton**

</details>

### PageContent

| Props        | Type        | Required |
| ------------ | ----------- | -------- |
| `children`   | `ReactNode` | ✅        |
| `hasPadding` | `boolean`   | ❌        |

<details>

<summary>children</summary>

The content that is shown. This subcomponent receives an structure to render, and as a footer, the following subcomponent as children:

* **PageContentFooter**

</details>

<details>

<summary>hasPadding</summary>

To add/remove the default padding.

</details>

### PageContentFooter

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

The footer of the page content.

</details>

### PageHeader

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

This subcomponent will always receive the following subcomponents:

* **PageHeaderTitle**
* **PageHeaderNavigation**
* **PageHeaderActions**

</details>

### PageHeaderActions

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

Normally call to action elements passed as child.

</details>

### PageHeaderNavigation

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

Used to navigate trough the page.

</details>

### PageHeaderNavigationButton

This subcomponent extends the SDS [Button](/sds/sds-3.0/sds-components/components/button/code.md) API. Always a 'ghost' button.

### PageHeaderTitle

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

A node passed to render a title.

</details>

### Sidebar

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

This subcomponent receives the following subcomponents as child:

* SidebarHeader
* SidebarContent

</details>

### SidebarContent

<details>

<summary>children</summary>

Used to render content inside the sidebar.

</details>

### SidebarContentDivider

Just to add a divider in the Sidebar. Extend the 'div' props.

### SidebarContentGroup

| Props             | Type                             | Required |
| ----------------- | -------------------------------- | -------- |
| `children`        | `ReactNode`                      | ✅        |
| `variant`         | `'static' \| 'accordion'`        | ❌        |
| `heading`         | `string`                         | ❌        |
| `defaultExpanded` | `boolean`                        | ❌        |
| `isExpanded`      | `boolean`                        | ❌        |
| `onClick`         | `(e: React.MouseEvent) => void;` | ❌        |

<details>

<summary>children</summary>

To create a group inside the sidebarcontent.

</details>

<details>

<summary>variant</summary>

To change the behavior of the ContentGroup. If static, it's always expanded.

</details>

<details>

<summary>heading</summary>

To pass a title.

</details>

<details>

<summary>defaultExpanded and isExpanded</summary>

The default expanded prop is used when having an uncontrolled approach. The isExpanded prop is used when using a controlled approach.

</details>

<details>

<summary>onClick</summary>

Mainly used to change the state, when clicked, and updating the isExpanded prop.

</details>

### SidebarContentGroupActions

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

To add actions to a group inside the sidebarcontent.

</details>

### SidebarContentGroupActionsButton

This subcomponent extends the SDS [Button](/sds/sds-3.0/sds-components/components/button/code.md) API. Always a 'ghost' button. Should be used inside a SidebarContentGroupActions. It is not required to use this button, but recommended. `iconOnly` variant used.

| Props  | Type                                                        | Required |
| ------ | ----------------------------------------------------------- | -------- |
| `icon` | [`AvailableTelicon`](https://2600hz.github.io/sds-telicon/) | ✅        |

### SidebarContentGroupItem

| Props                     | Type                                                                                                                                      | Required |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `children`                | `ReactNode`                                                                                                                               | ✅        |
| `icon`                    | [`AvailableTelicon`](https://2600hz.github.io/sds-telicon/)                                                                               | ❌        |
| `avatar`                  | `string`                                                                                                                                  | ❌        |
| `avatarProfilePic`        | `string`                                                                                                                                  | ❌        |
| `isLoading`               | `boolean`                                                                                                                                 | ❌        |
| `isActive`                | `boolean`                                                                                                                                 | ❌        |
| `notification`            | `string`                                                                                                                                  | ❌        |
| `notificationColor`       | `\| 'neutral' \| 'inverted' \| 'blue' \| 'green' \| 'yellow' \| 'red' \| 'indigo' \| 'purple' \| 'lime' \| 'teal' \| 'orange' \| 'pink';` | ❌        |
| `collapseSidebarOnMobile` | `() => void`                                                                                                                              | ❌        |

<details>

<summary>children</summary>

To create an item inside a group.

</details>

<details>

<summary>icon</summary>

To render a custom icon, right next to the string passed.

</details>

<details>

<summary>avatar</summary>

To load an avatar instead of an icon.

</details>

<details>

<summary>avatarProfilePic</summary>

If using an avatar, to pass a profile picture.

</details>

<details>

<summary>isLoading and isActive</summary>

The isLoading prop, overrides the icon, to a loading icon. The isActive prop, should be use in a controlled way, normally.

</details>

<details>

<summary>notification</summary>

To add a notification badge.

</details>

<details>

<summary>notificationColor</summary>

To add a notification badge color.

</details>

<details>

<summary>collapseSidebarOnMobile</summary>

Method executed when using a mobile resolution (below 767px).

</details>

### SidebarHeader

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

Used to render a header inside the sidebar.

</details>

### TabBar

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

To render the tabbar.

</details>

### TabBarItem

| Props               | Type                                                                                                                                      | Required |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `icon`              | [`AvailableTelicon`](https://2600hz.github.io/sds-telicon/)                                                                               | ✅        |
| `notifcation`       | `string`                                                                                                                                  | ❌        |
| `notificationColor` | `\| 'neutral' \| 'inverted' \| 'blue' \| 'green' \| 'yellow' \| 'red' \| 'indigo' \| 'purple' \| 'lime' \| 'teal' \| 'orange' \| 'pink';` | ❌        |
| `isActive`          | `boolean`                                                                                                                                 | ❌        |

<details>

<summary>icon</summary>

To pass a custom icon.

</details>

<details>

<summary>isActive</summary>

The isActive prop, should be use in a controlled way, normally, to set an active state..

</details>

<details>

<summary>notification</summary>

To add a notification badge.

</details>

<details>

<summary>notificationColor</summary>

To add a notification badge color.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/apptemplate/code/subcomponents.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.