<transburger-icon> is a custom element to display a hamburger icon that is transformed into a back or close icon after clicking on it or programmatically using its toggleIcon() method.
Install the component using Bower:
$ bower install transburger-icon --saveImport Web Components polyfill:
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>Import Custom Element:
<link rel="import" href="bower_components/transburger-icon/transburger-icon.html"> Use it!:
<transburger-icon></transburger-icon>| Attribute | Description | Default |
|---|---|---|
| transform-to | Hamburger icon transformation (close, arrow-left, arrow-right) | close |
| icon-position | Icon position (left, right) | left |
| active | Boolean attribute to display the second icon initially | false |
| no-transform | Boolean attribute to disable the icon transformation on click | false |
| type | type attribute for the internal button | |
| disabled | disabled attribute for the internal button | false |
| Method | Description |
|---|---|
| toggleIcon() | Changes the icon |
| Event name | Description | Bubbles |
|---|---|---|
| transburger-icon-changed | Fired when the icon is changed | true |
The following custom properties are available for styling.
If you want to scale the icon keeping the default proportions, you only need to set the icon height. You can use a value expressed in pixels or the keyword inherit to use the button font size. The icon color is the same as the button text color.
| Custom Property | Description | Default |
|---|---|---|
| --transburger-icon-button-background | Button background | #ccc |
| --transburger-icon-button-border | Border applied to the button | 0 |
| --transburger-icon-button-border-radius | border-radius applied to the button | initial |
| --transburger-icon-button-box-shadow | Button box-shadow | none |
| --transburger-icon-button-color | color applied to the button | inherit |
| --transburger-icon-button-cursor | cursor applied to the button | initial |
| --transburger-icon-button-font-family | font-family applied to the button | inherit |
| --transburger-icon-button-font-size | Button font-size | var(--transburger-icon-height, 14px) |
| --transburger-icon-button-margin | Margin applied to the button | 0 |
| --transburger-icon-button-outline | outline applied to the button | initial |
| --transburger-icon-button-overflow | Button overflow | visible |
| --transburger-icon-button-padding | Padding applied to the button | 0 |
| --transburger-icon-button-vertical-align | vertical-align applied to the button | middle |
| --transburger-icon-close-top-bottom-lines-active | Empty mixin applied to top and bottom lines for the close style when the icon is active | |
| --transburger-icon-height | Icon height in pixels. For better results, use multiples of 7 | 14px |
| --transburger-icon-line-radius | Hamburger icon lines radius | 2px |
| --transburger-icon-lines-height | Height of the lines | 2px |
| --transburger-icon-margin | Vertical and horizontal margins | 0.85714em |
| --transburger-icon-top-bottom-lines | Empty mixin applied to top and bottom lines | {} |
| --transburger-icon-width | Icon width | 1.42857em |
If you are going to use the button without a text, it's highly recommended that you use the aria-label attribute to provide a descriptive text for the button such as “Menu”, “Toggle menu” or similar that could to be used by Assistive Technologies like screen readers.
<transburger-icon aria-label="Menu"></transburger-icon>You can also provide the aria-controls attribute to specify the element ID that is controlled by the button.
<transburger-icon aria-label="Menu" aria-controls="menu"></transburger-icon>
<div id="menu" role="navigation">…</div>