> For the complete documentation index, see [llms.txt](https://docs.shipped.club/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shipped.club/components/secondary-sidebar-pages.md).

# Secondary Sidebar Pages

With this component, you can create a secondary sidebar, inside a page.

It is useful if you have additional sections inside a page, like for advanced settings.

<figure><img src="https://3985976695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT3t4pDs63s3Soj1JetJw%2Fuploads%2FaSFpmk0pli3RgFBRH4WV%2Fsecondary_sidebar_pages.gif?alt=media&amp;token=190668c6-eb68-4f48-add9-2730f45feb9a" alt=""><figcaption></figcaption></figure>

Component: `<SecondarySidebarPages />`

File: `src/components/molecules/SecondarySidebarPages/SecondarySidebarPages.tsx`

### Instructions

1. Configure the sections:

```typescript
type Sections = "section1" | "section2" | "section3";
```

2. Set the correct page path:

```typescript
const pagePath = "/dashboard";
```

3. Update the content of each section with the React components that you want to render

```typescript
        {currentSection === "section1" && <Heading size="md">Section</Heading>}
        {currentSection === "section2" && <Heading size="md">Layout</Heading>}
        {currentSection === "section3" && (
          <Heading size="md">Box model</Heading>
        )}
        {/* add more sections here */}
```

4. Add the `SecondarySidebarPages` component to a route in `WebAppPage`:

```typescript
{currentPage === Routes.dashboard && <SecondarySidebarPages />}
```

If you need to create another page with a secondary sidebar, duplicate the file, call the component `SecondarySidebarPages2` (or any other more meaningful name), and use it in `WebAppPage`.