transburger-icon | Vaadin

Custom element to display a transformable hamburger icon

[ This description is mirrored from at on 2019-05-22 ]

Transburger Icon

Build Status Published on

<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.

Transburger Icon Demos


Install the component using Bower:

$ bower install transburger-icon --save


Import 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!:



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-height Icon height in pixels. For better results, use multiples of 7 14px
--transburger-icon-line-radius Hamburger icon lines radius 2px
--transburger-icon-margin Vertical and horizontal margins 0.85714em
--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>


Link to this version
ImportedReleased 17 June 2018MIT License
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (2.0.0)
Browser Compatibility
Install with
bower install --save kcmr/transburger-icon"#3.1.1"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 3.1.1


  • polymer#Polymer/polymer#^2.0.0