# Source: https://dev.writer.com/components/sidebar.md

# Sidebar

A container component that organizes its children in a sidebar. Its parent must be a Page component.

<img src="https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/sidebar.png?fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=b1a685c1120bb35a896e70fbcda6bf31" data-og-width="474" width="474" data-og-height="692" height="692" data-path="framework/public/components/sidebar.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/sidebar.png?w=280&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=6d2089be34c9c172abe7e70b976c9aa2 280w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/sidebar.png?w=560&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=1e29ae6bdf3827d4044755280e9013e9 560w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/sidebar.png?w=840&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=23d9171e32c650e53cf1c8125124333f 840w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/sidebar.png?w=1100&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=5c2ae8dee690890a3e4f752137b3c025 1100w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/sidebar.png?w=1650&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=fe304b5b20274d10aaa7f4047f0524ca 1650w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/sidebar.png?w=2500&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=5dabb8030a5f832117009c8d02e3b783 2500w" />

## Fields

<table className="componentFields">
  <thead>
    <th>Name</th>
    <th>Type</th>
    <th class="desc">Description</th>
    <th>Options</th>
  </thead>

  <tbody>
    <tr>
      <td>Start collapsed</td>
      <td>Boolean</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Background</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Accent</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Primary text</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Secondary text</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Container background</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Container shadow</td>
      <td>Shadow</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Separator</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Button</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Button text</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Button shadow</td>
      <td>Shadow</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Custom CSS classes</td>
      <td>Text</td>
      <td>CSS classes, separated by spaces. You can define classes in custom stylesheets.</td>

      <td>
        <span>-</span>
      </td>
    </tr>
  </tbody>
</table>