---
title: Sidebar
category: General
---

```jsx live
render(
  <Sidebar>
    <Sidebar.Item>
      <HeadingUppercase>Group 1</HeadingUppercase>
    </Sidebar.Item>
    <Sidebar.List>
      <Sidebar.Item>Sidebar Item 1</Sidebar.Item>
      <Sidebar.Item active>Sidebar Item 2</Sidebar.Item>
      <Sidebar.Item>Sidebar Item 3</Sidebar.Item>
    </Sidebar.List>

    <Sidebar.Item>
      <HeadingUppercase>Group 2</HeadingUppercase>
    </Sidebar.Item>
    <Sidebar.List>
      <Sidebar.Item>Sidebar Item 4</Sidebar.Item>
      <Sidebar.Item>Sidebar Item 5</Sidebar.Item>
      <Sidebar.Item>Sidebar Item 6</Sidebar.Item>
    </Sidebar.List>
  </Sidebar>
)
```