**[ This description is mirrored from README.md at [github.com/MCKreukniet/dynamic-side-nav](https://github.com//MCKreukniet/dynamic-side-nav/blob/v1.0.1/README.md) on 2019-05-10 ]** [](https://www.webcomponents.org/element/MCKreukniet/dynamic-side-nav) # \ The web component `dynamic-side-nav` is a button. When a user touches the button, a side navigation wil open. The content in the side navigation determines the width of the navigation. ## Installation ``` bower install --save MCKreukniet/dynamic-side-nav ``` ## Example ```html

• nav item 1
• nav item 2
• nav item 3
• nav item 4

``` ## API Reference ### Properties **image-open** : string Change the image in the open button, which is the button that can open the side navigation. The string value is used in the `src` attribute of the image. **image-close** : string Change the image in the button, which can be visible when the side navigation is open. The string value is used in the `src` attribute of the image. **side** : string = "left" Choose which side the side navigation opens. Possible values are: `left` and `right`. ## Styling ### Button | Custom property | Description | Default | | ----------------------| ----------- | ------- | | `--img-open-width` | `width` of the image in the open button | `2rem` | | `--img-open-height` | `height` of the image in the open button | `2rem` | | `--img-close-width` | `width` of the image in the close button | `2rem` | | `--img-close-height` | `height` of the image in the close button | `2rem` | | `--img-open-color` | `stroke` of the default SVG image in the open button | `rgba(0, 0, 0, 0.87)` | | `--img-open-linecap` | `stroke-linecap` of the default SVG image in the open button. Suggested values: `round`, `square` | `square` | | `--img-close-color` | `stroke` of the default SVG image in the close button | `rgba(0, 0, 0, 0.87)` | | `--img-close-linecap` | `stroke-linecap` of the default SVG image in the close button. Suggested values: `round`, `square` | `square` | ### Other | Custom property | Description | Default | | ---------------------------- | ----------- | ------- | | `--content-min-width` | `min-width` of the content container | `1rem` | | `--content-max-width` | `max-width` of the content container | `initial` | | `--content-background-color` | `background-color` of the content container | `#fff` | | `--content-box-shadow` | `box-shadow` of the content container | `0 0 1.84615384615rem 0.30769230769rem rgba(0, 0, 0, 0.4)` | | `--overlay-background-color` | `background-color` of the overlay | `rgba(0, 0, 0, 0.4)` | | `--side-nav-z-index` | `z-index` of the content container and the overlay | `0` | ## License [Apache License 2.0](https://github.com/MCKreukniet/dynamic-side-nav/blob/master/LICENSE.md)