> ## Documentation Index
> Fetch the complete documentation index at: https://docs.assistantscenter.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Sidebar

> An Object which contains all the sidebar information.

## Adding additional items to the sidebar

```js theme={null}
theme: SoftUI({
  sidebar: {
    items: [
      {
        id: String,
        name: String,
        link: String,
        icon: String,
      },
    ],
  },
});
```

## Using gestures on mobile

```js theme={null}
theme: SoftUI({
  sidebar: {
    gestures: {
      disabled: Boolean,
      gestureTimer: Number,
      gestureSensitivity: Number,
    },
  },
});
```

## Example Usage

```js theme={null}
theme: SoftUI({
  sidebar: {
    items: [
      {
        id: 'pp',
        name: 'Privacy Policy',
        link: '/privacy-policy',
        icon: `<svg class="text-dark" width="16px" height="16px" viewBox="0 0 40 44" version="1.1"
                  xmlns="http://www.w3.org/2000/svg">
                <title>document</title>
                <g id="Basic-Elements" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Rounded-Icons" transform="translate(-1870.000000, -591.000000)"
                        fill="#FFFFFF"
                        fill-rule="nonzero">
                        <g id="Icons-with-opacity" transform="translate(1716.000000, 291.000000)">
                            <g id="document" transform="translate(154.000000, 300.000000)">
                                <path class="color-background"
                                      d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z"
                                      id="Path" opacity="0.603585379"></path>
                                <path class="color-background"
                                      d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"
                                      id="Shape"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>`,

      }
    ],
  },
});
```

```js theme={null}
theme: SoftUI({
  sidebar: {
    gestures: {
      disabled: false,
      gestureTimer: 200,
      gestureSensitivity: 50,
    },
  },
});
```

## Props

<ResponseField name="items" type="Array" required>
  <Expandable title="properties" defaultOpen>
    <ResponseField name="id" type="string" required>
      The id of the button which shows active when now === id
    </ResponseField>

    <ResponseField name="name" type="string" required>
      The name of the link, can also be changed for different languages using `locales.partials.sidebar["id"]`
    </ResponseField>

    <ResponseField name="icon" type="string" required>
      The icon of the item
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="gestures" type="Object" required>
  <Expandable title="properties" defaultOpen>
    <ResponseField name="disabled" type="boolean" required>
      Indicate if the sidebar should be disabled
    </ResponseField>

    <ResponseField name="gestureTimer" type="number">
      The gesture timer in milliseconds
    </ResponseField>

    <ResponseField name="gestureSensitivity" type="number">
      The gesture sensitivity in pixels
    </ResponseField>
  </Expandable>
</ResponseField>
