# Side panel

**Side panel** provides navigation, course structure, and progress tracking for users. It organizes content hierarchically and offers quick access to different sections while showing completion status.

## Styles settings

<table><thead><tr><th width="199">Property</th><th>Description</th></tr></thead><tbody><tr><td>Menu type</td><td><p>Select the menu type:</p><ul><li>Pop-up</li><li>Fixed</li></ul></td></tr><tr><td>Menu position</td><td><p>Select the menu position:</p><ul><li>Left</li><li>Right</li></ul></td></tr><tr><td>Background color</td><td>Set the panel's background color for visual distinction</td></tr><tr><td><strong>Options</strong></td><td></td></tr><tr><td>Display overlay</td><td>Enable a semi-transparent overlay over main content when panel is active</td></tr><tr><td>Display logo</td><td>Toggle visibility of company logo within the panel</td></tr><tr><td>Display description</td><td>Show or hide course description text</td></tr><tr><td>Panel width</td><td>Adjust the width of the side panel in pixels</td></tr><tr><td><strong>Section</strong></td><td></td></tr><tr><td>Select color</td><td>Select a background color for the section in progress</td></tr><tr><td>Hovered<br></td><td>Select a background color for the section when it is hovered</td></tr><tr><td>Disable color</td><td>Selected a color of the text in the section which is yet locked</td></tr><tr><td><strong>"Chapter" icons</strong></td><td></td></tr><tr><td>Display</td><td>Toggle display (Yes/No) to show or hide custom chapter icons</td></tr><tr><td>Upload</td><td>Upload custom chapter icons</td></tr><tr><td><strong>"Page" icon</strong></td><td></td></tr><tr><td>Display</td><td>Toggle display (Yes/No) to show or hide custom page icons</td></tr><tr><td>Upload</td><td>Upload custom page icons</td></tr><tr><td><strong>"Quiz" icon</strong></td><td></td></tr><tr><td>Display</td><td>Toggle display (Yes/No) to show or hide custom chapter icons</td></tr><tr><td>Upload</td><td>Upload custom quiz icons</td></tr><tr><td><strong>Horizontal progress</strong></td><td></td></tr><tr><td>Display progress</td><td>Toggle horizontal progress bar visibility (Yes/No)</td></tr><tr><td>Progress line (background)</td><td>Set unfilled progress color</td></tr><tr><td>Progress line (completed)</td><td>Set unfilled progress color</td></tr><tr><td>Rounding</td><td>Adjust corner radius of progress bars</td></tr><tr><td>Display border</td><td>Toggle border visibility around progress bars</td></tr><tr><td>Border color</td><td>Set border color</td></tr><tr><td>Thickness</td><td>Adjust border thickness</td></tr><tr><td>Text position</td><td>Choose text alignment relative to progress bar</td></tr><tr><td><strong>Vertical progress</strong></td><td></td></tr><tr><td>Progress position</td><td>Set vertical progress indicator position</td></tr><tr><td>Progress line (background)</td><td>Set unfilled progress color</td></tr><tr><td>Progress line (completed)</td><td>Set unfilled progress color</td></tr><tr><td>Display border</td><td>Toggle border visibility around progress bars</td></tr><tr><td>Border color</td><td>Set border color</td></tr><tr><td>Thickness</td><td>Adjust border thickness</td></tr><tr><td><strong>Effects</strong></td><td></td></tr><tr><td>Sidebar shadow</td><td>Click the "+" icon to add shadow effects. Select from shadow styles: None, Soft, Regular, or Retro. </td></tr><tr><td><strong>Margins</strong></td><td></td></tr><tr><td>Margin from icon</td><td>Set spacing between icons and text</td></tr><tr><td>Margin between sections</td><td>Define spacing between navigation items</td></tr><tr><td>Padding from progress</td><td>Adjust spacing around progress indicators</td></tr><tr><td>Padding from collapse</td><td>Set spacing around collapsible elements</td></tr><tr><td><strong>Search</strong></td><td></td></tr><tr><td>Display search</td><td>Toggle (Yes/No) search bar visibility</td></tr><tr><td>Background color</td><td>Set search field background</td></tr><tr><td>Icon color</td><td>Define search icon color</td></tr><tr><td>Rounding</td><td>Adjust corner radius of search field</td></tr><tr><td>Display border</td><td>Toggle border visibility</td></tr><tr><td>Border color</td><td>Set border color</td></tr><tr><td>Thickness</td><td>Adjust border thickness</td></tr><tr><td><strong>Collapse</strong></td><td></td></tr><tr><td>Default state</td><td><p>Choose initial panel state:</p><ul><li>Expanded</li><li>Collapse</li></ul></td></tr><tr><td>Collapse</td><td><p>Set the position of the collapse icon:</p><ul><li>Hide</li><li>Left outside</li><li>Left</li><li>Right</li><li>Right outside</li></ul></td></tr></tbody></table>

## Typography settings

The Typography tab provides options for customizing font, style, size, line spacing, and color for the following components:

* Course name
* Chapter name
* Section name
* Desription
* Search
* Course progress

For details, see [Typography and fonts](https://help.parta.io/branding/create-branding/typography-and-fonts).

## Disable side panel

It is recommended to disable the side panel in Parta if:

* You prefer to use LMS course navigation to avoid any confusing duplication.
* You want to ensure learners follow a single, cohesive path without switching between course pages.<br>

To disable the side panel:

1. Go to the **Branding** page > **Section**.
2. Select **Header** > the **Styles** tab > the **Menu “button”** section > **Display menu**.
3. Click **No**.
4. Click **Save**.