2015-10-31 23:39:51 +03:00
# Drawer
The [navigation drawer ](https://www.google.com/design/spec/patterns/navigation-drawer.html ) slides in from the left. It is a common pattern found in Google apps and follows the keylines and metrics for lists.
<!-- example -->
```jsx
2015-11-10 13:07:43 +03:00
import Drawer from 'react-toolbox/lib/drawer';
2015-10-31 23:39:51 +03:00
class DrawerTest extends React.Component {
2015-11-05 13:45:23 +03:00
state = {
active: false
};
2016-03-25 17:16:59 +03:00
2015-11-05 13:45:23 +03:00
handleToggle = () => {
this.setState({active: !this.state.active});
2015-10-31 23:39:51 +03:00
};
render () {
return (
< div >
2015-11-17 23:49:27 +03:00
< Button label = 'Show Drawer' raised accent onClick = {this.handleToggle} / >
2015-11-05 13:45:23 +03:00
< Drawer active = {this.state.active} onOverlayClick = {this.handleToggle} >
2015-10-31 23:39:51 +03:00
< h5 > This is your Drawer.< / h5 >
< p > You can embed any content you want, for example a Menu.< / p >
< / Drawer >
< / div >
);
}
}
2015-07-01 09:38:07 +03:00
```
## Properties
| Name | Type | Default | Description|
2015-10-31 23:55:12 +03:00
|:-----|:-----|:-----|:-----|
2016-03-25 17:16:59 +03:00
| `active` | `Boolean` | `false` | If true, the drawer will be visible.|
| `className` | `String` | `''` | Sets a class to give customized styles to the drawer.|
| `onOverlayClick` | `Function` | | Callback function to be invoked when the overlay is clicked.|
| `type` | `String` | `left` | Type of drawer. It can be `left` or `right` to display the drawer on the left or right side of the screen.|